[SOLVED] Click using Xpath is not working when called from a function in puppeteer

Click using Xpath is not working when called from a function in puppeteer

Trying to click on an element using $x but throws error. Tried different ways but no luck, can anyone let me know what is the mistake with the below code or any other way to click using xpath.

 Error: Protocol error (Runtime.callFunctionOn): Target closed.

below is the code

//commonfunction.ts

module.exports = {};

module.exports.ToggleButton = async function ToggleButton(Question, QuestionLabelXpath) {
      await page.waitForXPath(QuestionLabelXpath + "/descendant::label[text()='" + Question + "']/parent::div/descendant::button[@title='Edit']");
      const editIcon = await page.$x(QuestionLabelXpath + "/descendant::label[text()='" + Question + "']/parent::div/descendant::button[@title='Edit']");
      await editIcon[0].click();};

//questions.ts

const CommFun = require('./commonfunction');
    test('Verify "question"',async() => {
    CommFun.ToggleButton("question","//div[@role=\'tabpanel\']/div/div/div/div/div")
    },30000);

Tried $$eval within the test the click is working but when i put it in the function it is not working, does it has to do anything with the function call ?

const CommFun = require('./commonfunction');
test('Verify "question"',async() => {
await page.$$eval('button[title=\'Edit\']', elements => elements[1].click());
},30000);

Solution

Try to put await in the function calling, like this.

const CommFun = require('./commonfunction');
    test('Verify "question"',async() => {
    await CommFun.ToggleButton("question","//div[@role=\'tabpanel\']/div/div/div/div/div")
    },30000);