1

I want to write a python script that can check/test the css on a website.

  1. selenium webdriver is equipped with value_of_css_property(property_name), which can be used to extract value of a css property for an element. This can be compared with an expected value. The selenium can then interact and if required record the changes in property and again compare with the expected value.

  2. or capture screenshot of an element and then use PIL to compare the screenshot with the expected one (something what python needle does),however since size and placement change according to resolution/device I don't know how feasible this approach is.

any thoughts as to what can be done from above or any other suggestions?

Improve this question

1 Answer 1

Reset to default
1

We've been using Galen Framework for this particular "visual testing" problem:

Layout testing seemed always a complex task. Galen Framework offers a simple solution: test location of objects relatively to each other on page. Using a special syntax and comprehensive rules you can describe any layout you can imagine

Galen Framework is designed with responsiveness in mind. It is easy to set up a test for different browser sizes. Galen just opens a browser, resizes it to a defined size and then tests the page according to specifications

We are writing Galen tests in JavaScript, there is a Python port, but not sure how up-to-date it is.

needle is an awesome tool, but images overall are "clumsy" and hard to deal with and maintain. If you make your sizes and resolutions concrete, then it would make things easier.

Using value_of_css_property() is always an option, but it might not scale well and it would be challenging to avoid violating the DRY principle. Think of some sort of an abstraction layer over checking your CSS properties. For instance, have a "style" config in your tests with pre-defined styles with a number of required properties (e.g. every "submit" button in your application needs to have btn and btn-primary classes and needs to have a specific size, font size, background and border colors)..then you can configure a pre-defined style for every page object field in a page object..just thoughts.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks a lot Sir, your response was really informative and helpful. Would be testing Galen and as you mentioned checking the rendering or the overal layout of html in an automated fashion is something very challenging,as the results I am getting by methods still required manual touch points. Thanks a lot again :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.