CODEWITHSUNDEEP
node.jsgoogle-cloud-functionspuppeteer
Raphael Castro
Raphael Castro

Reputation: 1148

Why cant Puppeteer find this link element on page?

^^UPDATE^^
Willing to pay someone to walk me through this, issue posted on codeMentor.io: https://www.codementor.io/u/dashboard/my-requests/9j42b83f0p

I've been looking to click on the element:

<a id="isc_LinkItem_1$20j" href="javascript:void" target="javascript" tabindex="2"
onclick="if(window.isc_LinkItem_1) return isc_LinkItem_1.$30i(event);"
$9a="$9d">Reporting</a>

In: https://stackblitz.com/edit/js-nzhhbk (I haven't included the acutal page because its behind a username & pass)

seems easy enough
----------------------------------------------------------------------

solution1:

page.click('[id=isc_LinkItem_1$20j]') //not a valid selector


solution2:

const linkHandlers = await frame.$x("//a[contains(text(), 'Reporting')]");

if (linkHandlers.length > 0) {
    await linkHandlers[0].click();
} else {
    throw new Error('Link not found');
} //link not found

----------------------------------------------------------------------

I have looked at every which way to select and click it and it says it isn't in the document even though it clearly is (verified by inspecting the html in chrome dev tools and calling:page.evaluate(() => document.body.innerHTML))

**tried to see if it was in an iframe
**tried to select by id
**tried to select by inner text
**tried to console log the body in the browser (console logging not working verified on the inspect _element) //nothing happens
**tried to create an alert with body text by using:
_evaluate(() => alert(document)) // nothing happens
**tried to create an alert to test to see if javascript can be injected by:
_evaluate(() => alert('works')) // nothing happens
**also tried this: How to select elements within an iframe element in Puppeteer // doesn't work

Here is the code I have built so far

const page = await browser.newPage();

const login1url =
    'https://np3.nextiva.com/NextOSPortal/ncp/landing/landing-platform';
await page.goto(login1url);
await page.waitFor(1000);
await page.type('[name=loginUserName', 'itsaSecretLol');
await page.type('[name=loginPassword]', 'nopeHaha');
await page.click('[type=submit]');
await page.waitForNavigation();
const login3url = 'https://np3.nextiva.com/NextOSPortal/ncp/admin/dashboard';
await page.goto(login3url);
await page.click('[id=hdr_users]');
await page.goto('https://np3.nextiva.com/NextOSPortal/ncp/user/manageUsers');
await page.goto('https://np3.nextiva.com/NextOSPortal/ncp/user/garrettmrg');
await page.waitFor(2000);
await page.click('[id=loginAsUser]');
await page.waitFor(2000);
await page.click('[id=react-select-5--value');
await page.waitFor(1000);
await page.click('[id=react-select-5--option-0]');
await page.waitFor(20000);
const elementHandle = await page.$('iframe[id=callcenter]');
const frame = await elementHandle.contentFrame();
const linkHandlers = await frame.$x("//a[contains(text(), 'Reporting')]");

if (linkHandlers.length > 0) {
    await linkHandlers[0].click();
} else {
    throw new Error('Link not found');
}

Upvotes: 2

Views: 1120

Answers (3)

Raphael Castro
Raphael Castro

Reputation: 1148

It turns out that the previous click triggered a new tab. Puppeteer doesn't move to the new tab, all previous code was being executed on the old tab. To fix all we had to do was find the new tab, select it and execute code, here is the function we wrote to select for the tab:

async function getTab(regex, browser, targets) {
let pages = await browser.pages();
if (targets) pages = await browser.targets();
let newPage;
for (let i = 0; i < pages.length; i++) {
    const url = await pages[i].url();
    console.log(url);
    if (url.search(regex) !== -1) {
        newPage = pages[i];
        console.log('***');
        console.log(url);
        console.log('***');
        break;
    }
}
console.log('finished');
return newPage;
}

Upvotes: 1

innis
innis

Reputation: 380

On your solution1: 

await page.click('a[id=isc_LinkItem_1\\$20j]');

Or try to:

await page.click('#isc_LinkItem_1\\$20j]');

I have the slight impression that you must provide what kind of element your trying to select before the brackets, in this case, an < a > element.

On the second solution, the # character means we're selecting an element by it's id

Upvotes: 1

Andrea Bisello
Andrea Bisello

Reputation: 1225

due isc_LinkItem_1$20j is not a valid selector, maybe you can try finding elements STARTING WITH isc_LinkItem_1 , like this

await page.waitForSelector("[id^=isc_LinkItem_1]", {visible: true, timeout: 30000});
await page.click("[id?=isc_LinkItem_1]);

?

Upvotes: 1

Related Questions