Playwright and website authentication issues

I’m a little stuck trying to use the Playwright step to login into a website

I have a Python Jupyter Notebook that works, and I’m trying to translate code that to use inside Pipedream/Playwright step.

I am not very familiar with JS, so winging it.

I am basically getting Timeouts. It does not seem like the form click actually happens.
Here is the code inside my Playwright step.

There inline comments for previous attempts I’ve tried during troubleshooting.

In pipedream, it doesn’t seem like login ever completes. I’ve tried waiting for a URL and that times out… and when I wait for “Load” it doesn’t seem like authentication was successful.

Any thoughts on how to troubleshoot this?

import { playwright } from '@pipedream/browsers';

export default defineComponent({
  async run({steps, $}) {
    const browser = await playwright.launch();

    // Interact with the web page programmatically
    // See Playwright's Page documentation for available methods:
    // https://playwright.dev/docs/api/class-page
    const page = await browser.newPage();

    await page.goto('https://watson-rooney.requestcatcher.com/today_is_a_good_day');
    // await page.goto('https://www.discogs.com/release/11896884-Taylor-Swift-Fearless-Platinum-Edition')
    await page.goto('https://www.discogs.com/')

    console.log(await page.title())    

    await page.goto('https://www.discogs.com/login?return_to=https%3A%2F%2Fwww.discogs.com%2F')

    // await page.getByLabel('username').fill(`${process.env.DISCOGS_USERNAME}`)
    // await page.fill('#username', `${process.env.DISCOGS_USERNAME}`);  
    await page.fill('input[type="text"][name="username"]', `${process.env.DISCOGS_USERNAME}`);

    // Validate Username was entered.
    const inputValue = await page.inputValue('input[name="username"]');
    console.log(inputValue); // This will display the value in the console

    // await page.getByLabel('password').fill(`${process.env.DISCOGS_PASSWORD}`)
    await page.fill('#password', `${process.env.DISCOGS_PASSWORD}`);  

    // Validate Password was entered.
    const passwordValue = await page.inputValue('input[name="password"]');
    console.log(passwordValue.length); // This will display the value in the console

    console.log(await page.title())    
    console.log("Pre click()")
    // await Promise.all([
    //       // page.waitForNavigation(),  // Wait for the next navigation after clicking the button
    //       page.click('button[data-action-button-primary="true"][name="action"]:has-text("Continue")')  // Click the continue button
    //     ]);

    await page.click('button[data-action-button-primary="true"][name="action"]');
    // await page.click('button[name="action"]:has-text("Continue")');    
    console.log("Post Click")
    console.log(await page.title())    
    await page.waitForLoadState();
    // await page.waitForURL('https://www.discogs.com/*')
    // console.log("Home Page Loaded")

    // // await page.getByRole('button', {name: "Continue"}).click()
    await page.goto("https://www.discogs.com/sell/history/28422277")
    console.log(await page.title())

    const lines = await page.locator('role=main >> role=listitem').allTextContents();  // Get all text contents of list items

    // // const lines = await page.getByRole("main").getByRole("listitem").allInnerTexts()
    console.log(lines)
    // for (const line of lines) {
    //   console.log(line);
    // }

    const title = await page.title();
    const content = await page.content();

    // Close context and browser otherwise the step will hang
    await page.context().close()
    await browser.close();

    return { title, content, lines}
  },
})

FWIW, here is my Python Jupyter Notebook cell

start_time = datetime.now()
print(f"Start. {start_time}")

async with async_playwright() as p:
    # browser = await p.chromium.launch(headless=False, slow_mo=100)
    browser = await p.chromium.launch()
    page = await browser.new_page()

    await page.goto('https://www.discogs.com/login?return_to=https%3A%2F%2Fwww.discogs.com%2F')
    # 
    # 'https://www.discogs.com/login?return_to=%2Fmy'
    await page.get_by_label("username").fill(os.environ.get('discogs_username', ''))
    await page.get_by_label("password").fill(os.environ.get('discogs_password', ''))
    await page.get_by_role("button", name="Continue", exact=True).click()
    await page.goto("https://www.discogs.com/sell/history/28422277")

    lines = await page.get_by_role("main").get_by_role("listitem").all_inner_texts()
    print(lines)
    for l in lines:
        print(l)
    # print(await page.content())
    
    time.sleep(4) 
    await browser.close()

end_time = datetime.now()
print(f"DUN. {end_time}")
print(end_time - start_time)

In Python, I don’t need to wait after the button click(). However, I can’t seem to get past that step in NodeJS code.

Any thoughts greatly appreciated.

Cheers,
Tyler

Hi @mcmasty,

I understand you’re having trouble with the Playwright step in Pipedream. I see that you’re trying to log in to a website and you’re experiencing timeouts. I’ll try to help you troubleshoot this issue.

First, I recommend adding a waitForNavigation after the click action to ensure that the page navigation is completed before proceeding to the next steps. You can do this using Promise.all like this:

await Promise.all([
  page.waitForNavigation(),
  page.click('button[data-action-button-primary="true"][name="action"]'),
]);

Also, you might want to add some error handling and timeouts to the waitForNavigation and other waitFor functions to prevent indefinite waiting. For example:

await Promise.all([
  page.waitForNavigation({ timeout: 10000 }),
  page.click('button[data-action-button-primary="true"][name="action"]'),
]);

This will set a 10-second timeout for the navigation to complete. You can adjust the timeout value as needed.

If you still face issues, please let me know, and we can explore other troubleshooting options.
I’m a bot powered by Pipedream and GPT-4. I’m still learning, so please double check my answers and code! Learn how to build your own.

I think the problem has to do with unrecognized browser so it’s asking to validate the users email, but I don’t know how to continue the browser session so that I can enter the code that website will email me.