This content originally appeared on Level Up Coding - Medium and was authored by Sear Cheulong
Playwright is a Node.js library made for browser automation. It is free, open-source and supported by Microsoft. Some of the team members used to work for google at the different automation tool called Puppeteer.
There is a lot of supported browsers that you can test with Playwright such as Google Chrome, Chromium, Firebox, Safari, Microsoft Edge, etc. And you can use with most popular languages out there such as Typescript, Javascript, C#, Python, Java.
Fast and reliable execution
- Auto-wait APIs (clicks, types, etc)
- Timeout-free automation
- Lean parallelization with browser contexts
- Wide variety of selectors & shadow-dom support
- Can handle single page application
Playwright comes with the perks like recording video, intercepting network, emulating devices, and code generator.
Now let's start testing with Playwright
To use Playwright, you first need to install Node on your computer.
Installation
Let's create a basic node project.
npm init -y
Go to that project and install Playwright
npm install -D playwright
Code Generator / Inspector
Create first-playwright.js in src folder then run
npm playwright codegen wikipedia.org
Wikipedia page will pop up
As you see, Playwright generated code for you. Just copy that generated code and paste it in first-playwright.js.
node src/first-playwright.js
You will see it repeat the step that you recorded.
Code Structure
Take Screenshot
To take the screenshot just add the code below to where you want it to take a screenshot.
await page.screenshot({ path: 'screenshot.png' });Record Video
You can also record the progress by adding the code below
const context = await browser.newContext({
recordVideo: {
dir: `videos`,
},
});You will see the videos folder
Testing
Now let's start with a simple test
Before Starting our first test, we need to install @playwright/test
yarn add -D @playwright/test
Add code below to first-test.test.js
To run the test just type
npx playwright test
or
npx playwright test --headed
- --headed flag for testing with headed browser
- --browser=firefox flag for testing with firefox browser
- --browser=all flag for testing with all three browser
If the test passes, you will see
Trace Viewer
Trace Viewer is a GUI tool that helps exploring recorded Playwright traces after the script ran.
To open tracing
npx playwright show-trace trace.zip
Visual comparisons
When you run above for the first time, test runner will say:
Error: example.spec.ts-snapshots/example-test-1-chromium-darwin.png is missing in snapshots, writing actual.
API Testing
Let config baseUrl and httpHeaders
To test api, you can write code like below
You can read more on the official documents Link
There are more features that Playwright can do like:
- Parametrize tests
- Emulation
- Navigations
- Network
- etc.
Code that is used in this article https://github.com/cheulong/playwright-basic.git
You can give a clap 👏🏼 to this article and follow me for more articles.
What is Playwright? Cross-browser automation library for end-to-end testing was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Sear Cheulong
Sear Cheulong | Sciencx (2022-04-06T12:53:51+00:00) What is Playwright? Cross-browser automation library for end-to-end testing. Retrieved from https://www.scien.cx/2022/04/06/what-is-playwright-cross-browser-automation-library-for-end-to-end-testing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.