This topic was automatically generated from Slack. You can find the original thread here.
is there a way to see the playwright or puppeteer code in test mode so I can verify the functionality?
Based on your question, it seems you’re looking to verify the functionality of Playwright or Puppeteer code within Pipedream. If you’re asking about viewing or testing the code that’s executed when using Playwright or Puppeteer integrations in Pipedream, you can do so by creating a workflow and adding the respective Playwright or Puppeteer actions. For Playwright, you can use actions like “Get Page HTML” or “Page PDF” to interact with web pages and verify their functionality. Here’s how you can test these actions: 1. Search for the Playwright app from the step menu 2. Select an action like “Get Page HTML” or “Page PDF” 3. Connect your Playwright account 4. Configure the action parameters, such as the URL you want to interact with 5. At the bottom of the step, click “Test” to run the action and test the configuration For Puppeteer, similar actions are available, such as “Get HTML”, “Get PDF”, or “Get Page Title”. Follow these steps to test Puppeteer actions: 1. Search for the Puppeteer app from the step menu 2. Select an action like “Get HTML”, “Get PDF”, or “Get Page Title” 3. Connect your Puppeteer account 4. Configure the action parameters, such as the URL you want to interact with 5. At the bottom of the step, click “Test” to run the action and test the configuration If you’re looking to see the underlying code for these actions, Pipedream’s pre-built actions abstract away the code to make it easier for you to use these integrations without writing code. However, if you want to write or view custom code, you can create a code step in your workflow using Node.js and use the Playwright or Puppeteer libraries to write your script. Please note that when you’re testing or running workflows in Pipedream, you can view the execution logs, which will show you the output of each step, including any actions taken by Playwright or Puppeteer. This can help you verify that the actions are performing as expected. If you need further assistance or have specific questions about writing custom code for Playwright or Puppeteer in Pipedream, please let me know!
Hi Cole, have you seen our documentation on how to use Puppeteer / Playwright with Node.js?
There are example Node.js code steps that you can copy and paste into a Node.js code step in your workflow to test with
I can’t get any locators to work so I was hoping to see the window like you can in vs code when you run a test
No you can’t see the visual results like that, but I suggest using waiting for the page to finish loading by network calls or waiting for specific elements to appear.
If that fails, perhaps inspect the retrieved HTML or take a screenshot using the pre-built action to inspect further.
The error I keep getting is that it can’t find the locators, even after using xpath, css, selector id. For some reason i can’t get past just locating the login form. When I run it on VS code it works, which is part of my confusion.
There might be a race condition, since the workflow version is hosted whereas your the VS code is running locally.
Which site are you attempting to mock a login for?
Looks like it’s server side rendered to me as well
Meaning you cant see the locators either?
No I mean that the webpage’s form is available immediately. There shouldn’t be any client side hydration you need to wait for
Gotcha. Yeah, I’ve tried every form of locator available from the chrome inspect tool. It’s pretty sporadic on which locator it can’t find when it throws an error. I’ve tried it in playwright and puppeteer. All I’m trying to do is pass the email, password, wait for login, and get a screenshot. Simple operation, but cant debug it for some reason.
Could you share your Node.js code that you’re attempting to run in Pipedream?
import { puppeteer } from ‘@pipedream/browsers’;
export default defineComponent({
props: {
url: {
type: “string”,
label: “URL”,
description: “The URL to navigate to”,
},
email: {
type: “string”,
label: “Email”,
description: “The email to enter”,
},
password: {
type: “string”,
label: “Password”,
description: “The password to enter”,
},
},
async run({ steps, $ }) {
const browser = await puppeteer.browser();
const page = await browser.newPage();
await page.goto(this.url);
let screenshot = await page.screenshot();
await require(‘fs’).promises.writeFile(‘/tmp/screenshot1.png’, screenshot);
await page.type(‘#mail’, this.email);
await page.type(‘#password’, this.password);
await page.click(‘/html/body/main/div/div[1]/div/div[2]/form/div/div/div/input’);
await page.waitForNavigation();
screenshot = await page.screenshot();
await require(‘fs’).promises.writeFile(‘/tmp/screenshot2.png’, screenshot);
await browser.close();
return { screenshot1: ‘/tmp/screenshot1.png’, screenshot2: ‘/tmp/screenshot2.png’ },
});
This was after I tried to add the screenshot like you mentioned -
Probably not the cleanest version of the code I have had. Sorry about that.
Have you tried using the button selector instead?
There’s a good example here:
You can also upload the screenshots to the project’s File Store pretty easily, which will allow you to see them easier visually:
I will give that a shot again. I’ve tried every iteration the source code would allow. But I’ve put the project on hold for a bit, just getting back into it. I’ll try the button selector - thanks for the reference. Also, pretty sure I started on this before File Stores were out, so that’s good to know I can access them easier.
Thanks for the tips. I will make those edits and see I can get it working.
Currently I’m exploring just going through the Headless API so I can use selenium to run the test. Not sure if that will be a good workaround option.