How to Check the CSS of an Object by Capybara with jQuery

Testing the CSS of an object is sometimes needed. If you want to check the background-color, size, clip, ... of the objects, you must control the CSS code of the element. Capybara let you check it very easily with executing javascript from console by sending command to console of the browser. There are two function that can be used for sending command to console as follows:
page.evaluate_script()
page.execute_script() 

You can send your code as below. It tries to creates members object and then adds new profiles to members. With this way we can check if metrics of is shown as described format.
# from javascript add 10 more user to the community and totally there should be 11 members
# check the boundary, more button should be still not exit 
page.execute_script("window.members = App.Communities.models[0].attributes._members")
for i in 1..number.to_i
   page.execute_script("members.add(new App.Models.Profile({_res:'profiles.#{i}'}))")
end

In this example we used page.execute_script() but this method is not working for jQuery so we can use page.evaluate_scripts(). In the example below, I resize the window for Amazon.com and check if the navigation bar always fills the page from edge-to-edge. If the page has scroll bar we must subtract the with of the scroll bar, which is 15px, from the window width. Check the script below:



Another difference between two functions is that, evaluate_script always returns a value which Capybara converts it to Ruby value. Therefore if you don't need a return value it will be efficient to use execute_script, otherwise evaluate_script takes too long.


Comments

Popular posts from this blog

Selenium Error "Element is not currently interactable and may not be manipulated"

Performance Testing on CI: Locust is running on Jenkins

Change Default Timeout and Wait Time of Capybara

Performance Testing on CI: Integration of Locust and Jenkins

Getting the text of elements in Espresso