Question 184424 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to find element in the modal window

I have next modal window:enter image description here

When I try to work with dropdown or calendar,

get partySizeField() {
return $("#sn-reservationSelectorPartySize");
}
async partySizeValues() {
await this.partySizeField.click();
}

I get an error

Error: Can't call click on element with selector "#sn-reservationSelectorPartySize" because element wasn't found

What is the right way to call dropdown in a modal window?

Tags:

2

Answers


  1. 0

    The element you are after, it is inside and iframe.In order to access the element, you need to switch to iframe first.

    const iframeElement = driver.findElement(By.css("div#sn-modal-container> iframe"));
await driver.switchTo().frame(iframeElement);

get partySizeField() {
return $("#sn-reservationSelectorPartySize");
}
async partySizeValues() {
await this.partySizeField.click();
}
    Login or Signup to reply.
  2. 0

    The Modal Window elements are within an iframe so you have to switch to the <iframe> first as follows:

    const iframe = $(iframe[src*='preview-sdk.seatninjab/reservation-form'])
await browser.switchToFrame(iframe);

get partySizeField() {
return $("#sn-reservationSelectorPartySize");
}
async partySizeValues() {
await this.partySizeField.click();
}

    tl; dr

    Switching To Frames in WebDriverIO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search