Specific xpath is not working in puppeteer js

Viewed 435

I have a specific xpath that's not working. I'm waiting for the XPath to appear but for some reason I still can't get it.

Here is the xpath: I'm using: '//*[@id="settings"]/div[6]/div[2]/div[2]/div/div[3]/div/form/div[4]/div/div[2]/button[contains(text(), "Save")]'

To confirm that this xpath is in the page I go to my console and evaluate it.

$x('//*[@id="settings"]/div[6]/div[2]/div[2]/div/div[3]/div/form/div[4]/div/div[2]/button[contains(text(), "Save")]')

Then I get this:

[button.ml3-sm.mb1-sm.css-17hmqcn.ex41m6f0.primary]
0: button.ml3-sm.mb1-sm.css-17hmqcn.ex41m6f0.primary

My code is as follows:

  await page.waitForXPath('//*[@id="settings"]/div[6]/div[2]/div[2]/div/div[3]/div/form/div[4]/div/div[2]/button[contains(text(), "Save")]');
  const [setting] = await page.$x('//*[@id="settings"]/div[6]/div[2]/div[2]/div/div[3]/div/form/div[4]/div/div[2]/button[contains(text(), "Save")]');
  if(setting) setting.click();

I await for the element. I can visually see it on the page and also like i mentioned above I can evaluate it but the click never fires.
I've also tried this:

setting[0].click().

Any idea what I'm missing?

1 Answers

I suppose your selector is good, especially if you've been able to validate it through Chrome DevTools console.

I think you just need to await the click:

if(setting) await setting.click();

OR (without destructuring use the 1st index on [0])

await setting[0].click();
Related