0

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);
Vincent
  • 484
  • 4
  • 6
  • 21
  • Are you adding `await browser.close()` or `await page.close()` at the end of your code? – Edi Imanto Dec 16 '19 at 14:30
  • @EdiImanto i am using afterAll(()=>{ browser.close();}); – Vincent Dec 16 '19 at 17:14
  • @EdiImanto, even after changing browser is afterAll(async()=>{ await browser.close();}); still getting the same issue – Vincent Dec 16 '19 at 18:19
  • I think you should provide more detailed code than just a section like above. Also try to click the element within `await elementHandle.evaluate( node => node.click() )` – Edi Imanto Dec 17 '19 at 06:24
  • @EdiImanto, i have updated the code to match the scenario and tried $$eval within the test and function also. Works in the test but does not work when the code is in function. – Vincent Dec 17 '19 at 06:33
  • I've add another answer below – Edi Imanto Dec 17 '19 at 06:47

2 Answers2

0

As I saw in your code above, you made a typo in your variable name const QuestionLableXpath. Then you used the correct name QuestionLabelXpath, so they didn't match. Try fixing the name and see what the result looks like.

Tom Nguyen
  • 425
  • 3
  • 7
  • thanks for pointing that out, it was my typo mistake while creating this question, corrected now. In my actual testing i am passing this as parameter to the function. The code fails at this click operation. – Vincent Dec 17 '19 at 04:17
0

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);
Edi Imanto
  • 2,119
  • 1
  • 11
  • 17