Is it possible to access a 'style' type css selector when using cheezy's page-object and watir?

Question

In my page.rb, I'm using div(:select, :css => 'div.active[style="display: block;"]') which is giving me the error - Watir::Exception::MissingWayOfFindingObjectException.

In the console, document.querySelector("div.active[style='display: block;']") returns the object properly. I'm not too sure where to look in the documentation, so any help would be greatly appreciated.

Thanks in advance.

Answer 1

As far as I can tell from the page-object gem code, I do not believe that the page-object gem supports :css locators for watir-webdriver. At least it is not included in the watir_finders method - see element.rb and div.rb. I am guessing that the reason is due to watir-webdriver's current limitation that :css locators can only be used when using the element method - see watir-webdriver's issue 124.

Solution 1 - Use a Block

However, you could workaround these issues by defining the div in your page object with a block.

Assuming the html:

<div class="active" style='display: block;'>text</div>

The following worked for me:

div(:select){ browser.element(:css => 'div.active[style="display: block;"]') }

Solution 2 - Use Xpath

Alternatively, you could convert your css locator to an xpath locator:

div(:select2, :xpath => '//div[@class="active" and @style="display: block;"]')

Note that if you go this way, you might want to look at this other question, which talks about using a more robust locator for the class.