How to find a css element on the page if it is display: none?

Question

I'm running automated testing in Ruby.

I'm trying to write a script that finds id with display:none (visible only in mobile form), and clicks it.

Here is my code:

def open_menu
   page.find[:css, "a[id='mobile-nav-link']", visible: false].click
end

It gives me an error:

   Selenium::WebDriver::Error::InvalidSelectorError:
   invalid selector: No selector specified

Answer 1

Selenium only interacts with elements the way a user would.

If the link is only visible in mobile, I would suggest one of the following.

1. View the page via the mobile URL.

2. It's possible that you may be able to use Ruby's javascript execute to either update the control to be visible, or set the value that indicates you are viewing the page via a mobile device.

Updating the control to be visible

This link discusses how to set an element to visible using javascript execute: Selenium Webdriver - click on hidden elements

This link discusses how to use ruby's javascript execute: How to execute Javascript in Ruby written Webdriver test?

Put the two together, and you get something like this?

def open_menu
    elem = page.find[:css, "a[id='mobile-nav-link']", visible: false]
    js = "arguments[0].style.height='auto' arguments[0].style.visibility='visible';"
    driver.execute_script(js , elem)
    page.find[:css, "a[id='mobile-nav-link']", visible: true].click
end

I'm not entirely familiar with Ruby syntax, so I make no guarantees it will work copy/paste.

Answer 2

A quick search reveals similar code using round brackets, not square. I.e.:

def open_menu
   page.find(:css, "a[id='mobile-nav-link']", visible: false).click
end