In our "Complete Guide to Test Chrome Extensions with Puppeteer", we've covered all you need to know to get you up to speed on setting up end-to-end testing for a chrome extension. The fact is that many elements of the article can be brought to traditional front-end applications.
To truly deliver to you the complete knowledge we've acquired, we've decided to write this tiny, complementary blog post, where we'll cover ad-hoc topics, let's call it tips & tricks, to help you work with Puppeteer.
We will give you a full set of complete code snippet examples that enhance our Puppeteer workflows.
Surprisingly there's no API to clear an input field. However, there are plenty of workarounds. Our favorite is the following.
We're taking advantage of a Chrome feature, whereby three consecutive clicks select the whole text within the targeted input. This is limited to Chrome, but it's certainly a nifty trick to have in your toolbelt.
This tip might be an unpopular opinion as it came up purely by experiencing the pain of failing tests because input values are not in sync with the value provided to the Puppeteer primitive element.type. The need for this tool might be because DOM updates are asynchronous tasks, especially when abstracted through UI libraries and frameworks such as React and Vue. This utility function will perform a wait check on the target input element to ensure the typed value is actually in sync with the DOM node.
With the above code snippet, you can add specific
sleep calls in between your test cases. This is particularly useful if you're observing your test run in the heedful mode and you want to observe the state of your web application just for a few seconds and later proceed with your test. Here's a usage example (don't forget the
It's not a good practice to add random
sleeps in your code. Try to use this utility for debugging purposes only.
Puppeteer allows you to take screenshots of a given page instance. Here's an exciting wrapper function to perform screenshots on a given provided page.
This helper function is handy to name the screenshots for you and abstract your screenshot calls API configurations. In this case, we're using the option fullPage to make sure we capture the entire web application.
Notice we return
Promise.resolve() when the screenshot fails, we believe there's not reason to break the test run, unless this is somehow part of your test.
This is a recommended technique by the chrome team. You can evaluate a page and drop a
debugger; statement to create a breakpoint.
Important: this will only take effect if you pass in
devtools: true within the
And these are our tips. Let us know if you found them helpful by pressing the 👍 feedback button at the end of the page.
If you liked this article, consider sharing (tweeting) it to your followers.