5

How to find the CSS attributes for website. For eg: I have a testcase where I need to test the styling and design of a Button for webpage. How can I retrieve the elements, if for example I need find out the Size, Opacity, Colour for an element using Inspect element or firebug ?

  • Wouldn't it be better to inspect this visually (via matching screenshots) with a tool like Sikuli or Kantu? – Bobby231 Mar 16 '17 at 14:57
  • @Bobby231 Visually sometimes there are differences that gets away. I don't have much programming experience to user Sikuli or Kantu. How tough is it for a beginner to use such tools ? – WiredTheories Mar 16 '17 at 15:40
  • 1
    Both, Kantu and Sikuli have a recorder, that makes it easy to get started (no programming required). On Windows I would recommend Kantu, and Sikuli for Mac and Linux. – Bobby231 Mar 16 '17 at 19:31
  • Note that Firebug is officially discontinued and its users are advised to use the Firefox DevTools instead. – Sebastian Zartner Mar 17 '17 at 4:49
1

Cribbing from an answer from https://stackoverflow.com/questions/7754469/export-css-of-dom-elements:

Not a direct answer, but with Chrome Developer Tools, you can click inside Styles or Computed Styles, hit Ctrl+A and then Ctrl+C to copy all the styles in those given areas. It's not perfect in the Style tab because it picks up some extra stuff. Better than selecting them one by one I guess.

There's also a javascript code answer there that's pretty slick.

  • This is what I'm doing at the moment. – WiredTheories Mar 21 '17 at 8:51
  • So it sounds like you already knew the answer to your question? I'm confused. – ernie Mar 21 '17 at 17:16
  • I have already tried the direct answer you have mentioned, I was looking if there were other ways of doing it. – WiredTheories Mar 22 '17 at 8:08
1

If you want to automate this, I'm aware of two possibilities:

  1. As suggested by Bobby231, you could use a visual testing tool such as Depicted (open source) or Applitools (closed source) to check the rendered result of the website against a golden master.

  2. There’s recheck-web (open source; disclaimer: I work for retest, the company behind the project). recheck replaces asserts and checks everything at once, including the CSS attributes of each element. Here, you also have a golden master to compare against.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.