Тёмный

Automated Form Submissions with Chrome Puppeteer & NodeJS 

Front-end Testing with Kevin
Подписаться 5 тыс.
Просмотров 71 тыс.
50% 1

Опубликовано:

 

29 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 100   
@panagiotis__
@panagiotis__ 5 лет назад
Short, neat and explanatory. Nice one Kevin!
@CancunCrow
@CancunCrow 3 года назад
Subscribed so damn fast, this is what I'm currently required to learn
@杜朝辉-g7g
@杜朝辉-g7g 4 года назад
It is very important for the development of complex and complicated programs!
@patrickmcauliffe7162
@patrickmcauliffe7162 3 года назад
Great video dude, evenly paced and your voice is like caramel!!!!!
@pastuh
@pastuh 5 лет назад
I plan to automate some click/paste between two websites, i hope this tool will work 24/7
@PierreLaBaguette
@PierreLaBaguette 4 года назад
did you make it work? copy/pasting doesn't seem very straightforward at least on mac
@pastuh
@pastuh 4 года назад
yes, i use at work without problem. Very useful when you can add some specific logic. Compared to simple Macro application, this tool have advantage. And you can try another similar tool: Playwright
@danshib
@danshib 5 лет назад
Great job, exactly what I was looking for, thanks.
@frontendtesting
@frontendtesting 5 лет назад
Awesome to hear! Let me know if you have any other ideas for things to try out with Puppeteer automation
@doronshtauber6562
@doronshtauber6562 4 года назад
Great tutorial. Appreciate your effort!
@Khujandiho
@Khujandiho Год назад
You my friend just made me fire entire office workers and save me $$$. Great job
@thedarkking7581
@thedarkking7581 5 лет назад
Awesome video man.What I needed right now. Thanks
@cidinfotech8292
@cidinfotech8292 3 года назад
Thanks. Well narrated!!
@frontendtesting
@frontendtesting 3 года назад
Thanks!
@santosharakere
@santosharakere 6 лет назад
Excellent demo. Thanks.
@talkohavy
@talkohavy 2 года назад
And to think, that I've lived all these years not knowing that NaN stands for Not-A-Number.
@vebsrmn
@vebsrmn 5 лет назад
Thanks for the tutorial man! it really helps
@golubovicm
@golubovicm 3 года назад
Great tutorial! Thank you!
@djoscarmix
@djoscarmix 5 лет назад
how can i click a td element without id but its a chidren of a table with id ?
@rodelchris2588
@rodelchris2588 4 года назад
I have a problem on deploying it on server how to run it without cmd ? please enlighten me thank you!
@SteveStearns
@SteveStearns 3 года назад
This is the best and practical demo I have seen so far. Is there a way to import form inputs from a JSON file to run through the form and then web scrapping the results?
@kamajusan2
@kamajusan2 4 года назад
I have a page i'm scraping that will resubmit the page after i click the button. The button stays on the page which causes an infinite loop of page submit. How do i prevent the loop? I just want to click the button once. Instead, it looks for the button, submits then sees the button again and keeps hitting it which causes infinite page reload. Please help if you can.
@serkanakman9945
@serkanakman9945 4 года назад
Thanks Kevin great tutorial
@nowyouknow2249
@nowyouknow2249 4 года назад
Nice video! I have experience in webscraping using Python just tasting node js waters as regards webscraping
@theys6837
@theys6837 3 года назад
Node.js is faster amiright
@joydeepbhattacharjee5305
@joydeepbhattacharjee5305 4 года назад
I was looking for exactly something like this..
@tomliem1514
@tomliem1514 4 года назад
hi, is it possible to make this for google form? but i have text type input and file type input.
@TheBaltLT
@TheBaltLT 2 года назад
super very neat!
@sandeep56944
@sandeep56944 5 лет назад
the best tutorial you nailed it , thank you so much, i had one clarification, i have seen that you are seeing constants in the password area but i didn't see that you are importing the constants, can you please guide me how to use constants when in case hardcoded values or user-id logins
@thatdigitaldudeofficial
@thatdigitaldudeofficial 3 года назад
Great stuff! What about if the classes you're trying to grab are dynamic and long? I cannot seem to get it to work on certain websites. Any insight?
@emeraldpeterolu7289
@emeraldpeterolu7289 3 года назад
Awesome video, topic is well explained. Subscribed already...
@theys6837
@theys6837 3 года назад
Thanks for the video Kevin‼️ As of now which is your go to, WebdriverIO or -Puppeteer?-
@frontendtesting
@frontendtesting 3 года назад
Depends on your need. For basic automation (not testing), Puppeteer is a good option. I'd definitely go with WebdriverIO if testing is the goal though.
@keshavvkshirsagar7335
@keshavvkshirsagar7335 3 года назад
hi I want to pass parameters like username, password at the time of script running through command ho can i do this?
@frontendtesting
@frontendtesting 3 года назад
You can use either environment variables, or command-line parameters to do this. Check out npm packages like Yargs or Dashdash: www.npmjs.com/package/yargs www.npmjs.com/package/dashdash
@meshalkhalid7160
@meshalkhalid7160 4 года назад
This is good man, thank you
@Kevinjimtheone
@Kevinjimtheone 4 года назад
Great video, Kevin. Ngl, I got distracted multiple times seeing some of the lines ending in a semicolon and other not.
@frontendtesting
@frontendtesting 4 года назад
Heh, that's just my poor habits at work. I prefer always using semicolons, but I often forget. I should get a linter set up for that :)
@ImperiumLibertas
@ImperiumLibertas 3 года назад
@@frontendtesting prettier's got you ;D
@TrackProbe
@TrackProbe 4 года назад
Can this tool only work with web form submission or can it also automate logon process of a desktop chat client or a bot like neatbot.
@CC_Double
@CC_Double 4 года назад
Hello Kevin, could you helpme find out how could I substitute: document.querySelector('[title="Send Message to Group"]').click();
@AmeerHamza-cy6km
@AmeerHamza-cy6km 5 лет назад
I dont understand why you used function waitForNavigation before clicking,? We need to click and than wait for next page, am i right?
@naveenk2k
@naveenk2k 5 лет назад
github.com/GoogleChrome/puppeteer/blob/v1.19.0/docs/api.md#pageclickselector-options
@xcoldbloom
@xcoldbloom 4 года назад
19:28 cool
@vinsorder746
@vinsorder746 6 лет назад
Wow! Is it a time for new instrument?) Thanks for your videos.
@nareshputta9316
@nareshputta9316 4 года назад
Hi sir Suppose we have timer for before login then how will reduce that time bro
@AymanAliAli
@AymanAliAli 3 года назад
I am interested about SPA apps, for example a React App, will puppeteer work just fine? especially wait for navigation? will components work fine. As you know with React there is no page loads. I am wondering if you already have a video about testing a fully SPA app. Thanks. This video was very helpful especially the three clicks part.
@frontendtesting
@frontendtesting 3 года назад
Puppeteer should still work there, but you may need to add some "wait" conditions to check on elements being loaded. If you're going to be writing tests, I'd recommend using a tool like WebdriverIO that has some of this built-in
@theys6837
@theys6837 3 года назад
I'm just starting out with Puppeteer but I'm guessing one could use Cookies to login faster 🤔🤔
@frontendtesting
@frontendtesting 3 года назад
Yep, definitely!
@apraghavendra6180
@apraghavendra6180 5 лет назад
what if we dont have "id" tag for html element?
@VelGoesBrrr
@VelGoesBrrr 4 года назад
I just found this video right now and saw your comment. Probably way too late for you (who knows? ^^), but maybe it could help others: If you don't have an id to work with you can go with any other CSS selector like you would with jQuery $('xxx') or element.getElementsBy...('xxx'). For instance if you have an input with a name attribute, let's say , you can do it with await page.type('input[name="first_name"]', "your value");
@SumeshGupta
@SumeshGupta 4 года назад
Hi Kevin great work if there is image captcha on login how to handle it Sometimes on login sometimes on submission page if we have image captcha then how to deal it Please provide solution Is there a way we can show the captach in a small window and write it and the whole thing automate when I submit it Or page by page it will show captcha and once I fill captcha rest thing it automates
@rdalben
@rdalben 3 года назад
Hi, great video !! But how does this process.env works ? Do you have a video on it ? Can you pass a brief text about so I can search for it ?
@anushkamishra8257
@anushkamishra8257 3 года назад
How can we use puppeteer if there is an OTP login ?
@frontendtesting
@frontendtesting 3 года назад
Great question! Unfortunately I don't have a good answer. You could 'pause' you script and manually enter the OTP code, but I don't know of a way to fully automate it.
@dancodrean01
@dancodrean01 4 года назад
There is also a Puppeteer Recording extension on Chrome that can auto-export your steps - but it works like shit.
@silentexploration
@silentexploration 4 года назад
Do these recording tool ever work? The one for Testcafe is hell as well.
@tomchambers9787
@tomchambers9787 3 года назад
Thanks Kevin great video.. but before i get too far into the Puppetter.. I need to ask a question. Can the headless version of puppeter handle form submission with headless version. As i think of form submisson the normal way needing a display... and i can;t convert it to a post as the form has so much security it you tamper with the form in any way it quits.. and grabbing all the data and posting it direct would be so simple for them to detect.. so which ever headless package I settle on it must be headless and must be able to submit a full blown form without the usual display... I need to know this early on so while waiting for Kevin to respond it would be great if someone who knows could jump in.. Thanks in advance.
@theys6837
@theys6837 3 года назад
Have you reached a solution??
@testtest-gr6rz
@testtest-gr6rz 4 года назад
Great Video !
@AmeerHamza-cy6km
@AmeerHamza-cy6km 5 лет назад
I also need help making a script to press the checkbox on page
@Kevin-pn9ri
@Kevin-pn9ri 2 года назад
really good video. Would you build a robot on pancake swap using puppeteer?Is it possible to automate all the trading process like buying and selling coins
@jaco5232
@jaco5232 3 года назад
Nice!
@phpmysql2007
@phpmysql2007 4 года назад
You da maaaaaaaaaaaaaaan!
@kartikeyrana3736
@kartikeyrana3736 3 года назад
how may i copy and paste text on my browser(on mac system) please help !
@frontendtesting
@frontendtesting 3 года назад
You can execute custom JS code that uses the Clipboard API to run copy/paste commands: developer.mozilla.org/en-US/docs/Web/API/Clipboard_API Not sure how to do this in Puppeteer off the top of my head.
@DjilouSP
@DjilouSP 5 лет назад
Does it handle CSRFTOKEN if it was there as a hidden input maybe ?
@frontendtesting
@frontendtesting 5 лет назад
I think so... it should treat it as a normal website. I'm not really sure what CSRFTOKEN is though.
@testtest-gr6rz
@testtest-gr6rz 4 года назад
Great tips thanks haha
@shsbamxnw
@shsbamxnw 3 года назад
and a captcha comes.
@frontendtesting
@frontendtesting 3 года назад
:(
@goldgrrl
@goldgrrl Год назад
what if the element doesn't have an id?
@mateuszk4825
@mateuszk4825 3 года назад
Have you used Playwright? Would love to see a video on that
@frontendtesting
@frontendtesting 3 года назад
I have not used it yet, but agreed that it would make for a great video. Would love to compare their features with what WebdriverIO or Puppeteer has
@MichaWeidenfeld
@MichaWeidenfeld 5 лет назад
Doesnt work for me... Can't even make the screenshot. It says... Error: Parsing error: The keyword 'const' is reserved Pls help...
@IncolasCopperfield
@IncolasCopperfield 4 года назад
You gotta learn the basics of javascript first
@anjali3928
@anjali3928 4 года назад
Hello , Can You make a video for captcha cracking using puppeteer.
@frontendtesting
@frontendtesting 4 года назад
Hey... unfortunately, that's not going to happen :) CAPTCHAs are purposefully made to avoid that sort of thing, so it's just not a simple task at all, and I don't have the CS degree to figure it out.
@yakshamalowanshi7444
@yakshamalowanshi7444 4 года назад
Can someone please tell me is puppeteer testing is worth to start work on?
@frontendtesting
@frontendtesting 4 года назад
It depends on what you want to use it for. It you want to do Automated Testing, I highly suggest using WebdriverIO, which does have puppeteer support built-in so you get the best of both worlds. If you want to use it just to automate some process, then yeah, learning puppeteer is definitely worth it IMO
@officialfoltan5906
@officialfoltan5906 3 года назад
Can i ask you some questions about this tutorial ?
@compassblue33
@compassblue33 5 лет назад
How to deal with recaptcha while using puppeteer
@frontendtesting
@frontendtesting 5 лет назад
That's a really tough one. The whole point of recaptcha is to prevent automation, so you're going to have an extremely tough time trying to write automated code to get around it. I'd recommend two approaches: 1. Create a specific test server that has a workaround to captcha, either disabling it or providing an alternative 2. Pausing your test when the captcha step occurs and manually entering it, then unpausing to continue
@compassblue33
@compassblue33 5 лет назад
@@frontendtesting Can you please help me out with this issue. stackoverflow.com/questions/57017108/puppeteer-isnt-working-with-lazy-loaded-images-even-after-scrolling-from-npm-p
@silentexploration
@silentexploration 4 года назад
Yeah, Puppeteer is a bit noisy for a full-scale web testing, too much typing and the scripts tend to be too long, which makes is difficult to navigate if you come to it after some time.
@frontendtesting
@frontendtesting 4 года назад
Yep. For full-scale testing, I definitely recommend a tool like WebdriverIO or Cypress.io
@silentexploration
@silentexploration 4 года назад
@@frontendtesting I actually had a try over the weekend, just for fun and learning purposes. And it wasn't as bad as expected. I mean it probably takes a bit longer to type it all, but the tests are really stable and fast, so it will probably pay off later if they are used on a regular basis. Cypress is fine, but I can't stop thinking whether or not it's so pupular just because their good marketing... when I see the number of basic questions on Stackoverflow or elsewhere, it makes me wonder why people pick a tool they can't handle or work with effectively.
@frontendtesting
@frontendtesting 3 года назад
@@silentexploration Yeah, Cypress definitely has some hype to it. But I also think the founders are really smart folks and definitely looking at how to move the industry forward. We can certainly be skeptical, but also appreciate what Cypress introduces to a bunch of folks who wouldn't be interested otherwise.
@yorkcorrea6661
@yorkcorrea6661 4 года назад
and for #Shadow-root??
@carolyn9237
@carolyn9237 Год назад
this is for the complete newbs because it took me a min... if you're using VS code you would use the word "code" instead of "subl" 🤦🏽‍♀
@brucelee7782
@brucelee7782 5 лет назад
Sublime editor?? *Closes video immediately* jk haha (or not).
@frontendtesting
@frontendtesting 5 лет назад
Hah. Used to be you'd get criticized for *not* using Sublime Text
@Altanis1
@Altanis1 3 года назад
Time to make a sub bot lmfaoo
@frontendtesting
@frontendtesting 3 года назад
Well of course. How do you think I got to 3k subs :p
@Altanis1
@Altanis1 3 года назад
@@frontendtesting LMAO
@hamud350
@hamud350 4 года назад
please help me
@testtest-gr6rz
@testtest-gr6rz 4 года назад
Great Video !
Далее
Puppeteer vs Selenium: Which to Choose
8:01
Просмотров 2,7 тыс.
The TRIPLE FOLDING phone has a Problem.
12:54
Просмотров 2,3 млн
Industrial-scale Web Scraping with AI & Proxy Networks
6:17
WebDriver BiDi: Future of browser automation
13:42
Просмотров 20 тыс.
End to End tests with Google's Puppeteer - Tyler Clark
32:29
Web Scraping like a GOD with Javascript
8:17
Просмотров 54 тыс.
Web Scraping with Puppeteer, NodeJS & Shopify
27:54
Просмотров 66 тыс.