Discovering obscured HTML elements using nightwatchJS

Question

Within the form, there are checkbox and input fields present.

The custom-styled checkbox appears hidden in the browser view due to CSS settings (opacity: 0). An example can be found here.

Due to this styling, nightwatchjs is unable to detect whether the checkbox exists or not.

Is there a way to overcome this issue?

formFieldsExist:function(){
  return this
             .assert.visible('#name')
             .assert.visible('#yesOrNo')
             .pause(2000)
}

1) How can hidden elements be detected if they exist or not?

2) If a solution exists, how can the status of the checkbox (true or false) be detected?

Answer 1

Answer №1

In case the concealed element is hidden using a style declaration such as style="visibility: hidden;", here are some ways you can address it.

Using nightwatch:

.useXpath()
.waitForElementVisible("//*[@style='visibility: hidden;']", 1000)

For python:

driver.find_elements_by_xpath("//*[@style='visibility: hidden;']")

Answer 2

In case the concealed element is hidden using a style declaration such as style="visibility: hidden;", here are some ways you can address it.

Using nightwatch:

.useXpath()
.waitForElementVisible("//*[@style='visibility: hidden;']", 1000)

For python:

driver.find_elements_by_xpath("//*[@style='visibility: hidden;']")