XPATH contains not working with page.$x

I am using latest puppeteer version and trying to click on span element with text, but returns undefined.

const setting = await page.$x('//span[contains(text(), "Settings")]'); // setting is undefined and setting.click() don't work

However, I can get all span element with following const setting = await page.$x('//span'); // returns array of span elements

I am still trying to iterate over span elements to find exact span with correct textContent but still i get is undefined. const setting = spans.filter(span => span.textContent === 'Settings'); // still undefined.

Is there any easy way to find/click element with text content Same things perfectly works on selenium. Is this issue in puppeteer ?

[shankarregmi]

I think it is always better to waitFor element to be visible in DOM before trying to click/accessing it.

await page.waitForXPath('//span[contains(text(), "Settings")]', 5000);
const [setting] = await page.$x('//span[contains(text(), "Settings")]');
if(setting) setting.click();

[regmish]

@shankarregmi My bad I was trying to click on the settings before it was completely loaded into DOM, your solution perfectly works for me. Thanks.