0

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?

Taron Qalashyan
  • 660
  • 4
  • 8
Evgeniya
  • 13
  • 5
  • Are you sure the modal is in the DOM at the moment this code is called? If not, you might need to wait a bit as described here: https://stackoverflow.com/questions/13640151/webdriver-modal-window-click-not-working – Igor Pejic Jun 12 '23 at 14:12

2 Answers2

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();
}
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
KunduK
  • 32,888
  • 5
  • 17
  • 41
  • I got ReferenceError: By is not defined – Evgeniya Jun 13 '23 at 08:48
  • Checkout the updated answer and let me know the status. – undetected Selenium Jun 13 '23 at 09:46
  • I wrote `const iframeElement = driver.findElement(By.css("div#sn-modal-container>iframe") )`; before describe block, and in the describe block I wrote `await driver.switchTo().frame(iframeElement);` but again got ReferenceError: By is not defined – Evgeniya 10 mins ago Delete – Evgeniya Jun 13 '23 at 10:11
  • If I wrote `const iframeElement = driver.findElement(By.css("div#sn-modal-container>iframe") );` IN the describe block, I get another error `ReferenceError: Cannot access 'iframe' before initialization` – Evgeniya Jun 13 '23 at 10:42
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

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352