How to select and type in an input field with dynamically generated attributes with Puppeteer?

user_7072974 0
Viewed 910

I am trying to automate login to Cisco Webex meetings. Couldn't find anything online so decided to try out puppeteer and make my own script to do that. So the issue I am facing is I cannot select the input fields because their attributes are dynamically generated. Plus they only have class attributes. I tried selecting parent divs and narrowing down to the input but it didn't work. I also tried to list the inputs in the page with page.evaluate() and querySelectorAll() and then choosing the inputs from there with click(). But somehow I am returned an empty object. I have also tried adding a 6s timeout but still no success. Btw this works in chrome console. I am baffled as to why it wouldn't work in node with puppeteer it could have solved my problem (maybe). I also tried using the mouse.click() but no success (Actually I am new to puppeteer and I don't exactly know how this method works. Tried entering different axes but no luck, if that is actually how it should be done). Please correct me if I am wrong somewhere. Any help would be much appreciated.

Environment:

What steps will reproduce the problem? Trying to select an input field or a button that has its attributes generated dynamically

CODE

What is the expected result? Select the input field and type in it.

What happens instead? Error: Evaluation failed: TypeError: Cannot read property of null

EDIT 1: Directly selecting the input gives me this Error: No node found for selector

EDIT 2: waitForSelector() gives a timeout 30000ms exceeded error

EDIT 3: Edited the exact link I have to work on

EDIT 4: I tried getting the placeholder attribute but no luck

puppeteer node.js javascript
1 Answers

For me, using xpath seems to work better in cases when I need to uniquely select an element based on its parent/ancestor class too.

Puppeteer's page.waitForXpath comes handy in dealing with these elements.

Below, I have tried these APIs and I was able to enter some text in input box and then click the button.

const puppeteer = require('puppeteer');
const SERVER_URL = "https://globalpage-prod.webex.com/signin?surl=https%3A%2F%2Fsignin.webex.com%2Fcollabs%2Fauth%3Flanguage%3Den_US&language=en_US";

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(SERVER_URL);

    let elem = await page.waitForXPath("//div[contains(@class, 'el-form')]//input");
    await elem.type('foo.bar@example.com');

    elem = await page.waitForXPath("//div[contains(@class, 'el-form')]//button");
    await elem.click();

    await page.close();
    console.log('Done');
})();
user_40457540
Related