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, 2017 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 ? Mar 16, 2017 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, 2017 at 19:31
  • Note that Firebug is officially discontinued and its users are advised to use the Firefox DevTools instead. Mar 17, 2017 at 4:49

2 Answers 2


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. Mar 21, 2017 at 8:51
  • So it sounds like you already knew the answer to your question? I'm confused.
    – ernie
    Mar 21, 2017 at 17:16
  • I have already tried the direct answer you have mentioned, I was looking if there were other ways of doing it. Mar 22, 2017 at 8:08

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 and acknowledge you have read our privacy policy.

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