Playwright Tutorial: Futuristic Features

Most Prominent Playwright Features For Automation Testing

As per StateofJS survey, Playwright was able to consistently retain 100% of its users from 2020 to 2021. No wonder, Playwright has been the talk of the town in the testing community as one of the best options to consider automation testing. What makes Playwright special? Let's have a look at some of the most notable Playwright features for test automation.

• Playwright Test Generator and Test Inspector
• Playwright Fixtures
• Screenshots And Videos On Test Failures
• Playwright Retries
• Playwright Auto-Waiting Mechanism

You can also go through the following video from the TestMu AI YouTube channel to learn more about futuristic Playwright features.

Let’s look at the above Playwright features one by one!

Playwright Test Generator and Test Inspector

Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website to test. The Playwright Inspector window records your tests, copy the tests, clear your tests as well as change the language of your tests.This enables us to easily create tests by recording our actions. Also known as Playwright Test Script Recorder.

In the previous tutorial, we read about a test script showcasing the browser followed by context and page, which eventually led us to a particular site. Since we considered the TestMu AI eCommerce Playground (a demo account), it will get redirected to its home page.

We also learned about the exact use of new context and new pages. The next step was login.

This time, we will use a Playwright feature instead of writing code. To use this feature, we need to follow a few steps:

• Open up the terminal with the help of - Ctrl + J. Type this command:

–npx playwright codegen

This command is used for recording tests or generating test scripts.


• Now, you can see a browser page and the Playwright Inspector.


Eventually, the Playwright Inspector records whatever actions that occur on the browser. (By default, it will be in record mode)

For example – copy the URL of a particular site and paste it into the browser (which is in incognito mode). Now when you look at the Inspector page, you get the exact URL you searched for in the browser.

One of the major highlights around Playwright is its Language Compatibility. Playwright tests by default are generated in JavaScript. However, you can change the Playwright test to other programming languages such as Java, .NET or C#, Python.



A small example of how the Playwright Inspector works is when you make a few changes:

Test Scenario:

• Login to your TestMu AI eCommerce Playground account.
• Go to Edit your account information (make necessary changes) and press Continue.
• Click on the Logout option.
• Now check the code on the Playwright Inspector.


Playwright Inspector

Playwright inspector is a great tool that helps in authoring and debugging Playwright scripts. This is a default recommended tool for script troubleshooting. It opens up a browser window highlighting the selectors as you step through each line of the test. You can also use the explore button to find other available selectors which you can then copy into your test file and rerun your tests to see if it passes.




test("Login test demo", async () => {const browser = await chromium.connect("wss://cdp.lambdatest.com/playwright?capabilities=
${encodeURIComponent(JSON.stringify(capabilities))}");
    const context = await browser.newContext();
    const page = await context.newPage();
await page.goto("https://ecommerce-playground.lambdatest.io/")
await page.hover("//a[@data-toggle='dropdown']//span[contains(.,'My account')]")
    // await page.click("text=Login")
    await page.click("'Login'")
    await page.fill("input[name='email']", "[email protected]")
    await page.fill("input[name='password']", "Pass123$")
    await page.click("input[value='Login']");
    await page.close();
    await context.close();
    await browser.close();

Playwright Fixtures

Playwright test comes from the concept of test fixtures. Fixtures establish an environment for each test. After we complete the steps under Playwright test script recording, we need to;-

Test Scenario:

• Create a new test file in the VS Code with the name “recorded.test.ts’’ and save it.
• Close the codegen browser as well as the Playwright Inspector.
• The difference that the Playwright test runner creates is that - we don’t need to launch a Chromium browser; instead, we place a code that indicates ‘’page. goto along with the URL.’’ In short, we can say that there is the usage of only parameters under the Playwright test runner, and this concept is known as the Playwright fixture.
• To execute this, go to the file named “playwright.config.ts’’; you will see a code that says testMatch (specify the folder, followed by file name).
• Enter your new test file - testMatch: [tests/recorded.test.ts”]
• Next, bring up the terminal with - Ctrl + J, and type npx playwright test.
• Playwright, by default, runs in the headless mode. Hence when we execute a test, we cannot see the graphical user interface/taskbar. We will use a new method to fix this issue.
• Go to the configuration file and add code for the headless mode. Eventually, the code will look like this -

Also, this configuration test applies to all the tests we perform.

Playwright Reporters

In-built reporters is another Playwright feature for different needs to provide custom reporters. There are a wide variety of reporters. You can also use multiple reporters at the same time. The reporter command-line option is the simplest way to try out built-in reporters.

Examples of a few reporters are - DOT, LINE, GitHub, JSON, JUnit, and HTML. We will focus more on DOT, HTML, and JSON.

Test Scenario:

• Go to the ‘’playwright.config.ts’’ file once we add the reporter code, and it will look like this.

{testmatch: [‘’tests/recorded.test.ts’’], use: {headless: false}, reporter: [ [‘’dot’’], [‘’json’’, {output file: ‘’jsonReports/jsonReport.json’’}], [‘’html’’, {open: ‘’never’’}]]



• We can execute the same test on the terminal by entering credentials and login details. Once we complete the test, the entire process appears as a terminal code.

• A new folder called ‘’playwright-report’’ is created on the left-hand side. Within the folder, there’s a section known as ‘’index.html’’. Open this file on your Chrome browser. This is how your test result will look.


You will be able to see the multiple steps in the test. Example ‘’navigating to a particular site, hover action, login, accession’’.

Also, if you are familiar with Selenium Cucumber, you might know about hooks (before and after hooks).

The function of hooks - ‘before hooks’ runs before the test begins, and ‘after hooks’ runs after the test ends.



• In the terminal, under the “recorded.test.ts” folder, we are using the fixture page. At the start, we do not open the browser or close it at the end of the script. However, under the “login.test.ts” folder, we open the browser and, in the end, close the browser.
• This Playwright feature stands out because the browser's opening and closing happen alone, and we do not have to make manual changes.
• We have another folder called “jsonReports”; under it, there’s a folder called “jsonReport.json” Here, we have a significance for DOT. A dot is essential because if we pass a test, we see a green dot, and if a test fails, the dot becomes red.

Screenshots and Videos on Test Failures

Screenshots/Videos can benefit a testing server when a test fails. It can show what exists on the screen when a test fails. This Playwright feature is beneficial when we want to know where we could have gone wrong at one glance.

Suppose you want to view a screenshot or video of a particular test. You will have to add two additions to your script - screenshots and video.

After your test ends, you can view screenshots and videos.

Screenshot:

Video:

You will get three options when you add a “screenshot” in the script.

• Off
• On (captures screenshot when chosen)
• Only-on-failure (if there’s a failure in the test, the Playwright will capture a screenshot)

Next, we need to add “video” in the script, which will also show a few options.

• Off
• On
• On-first-entry
• Retain-on-failure
• Reentry-with-video

We need to understand that taking screenshots or videos of multiple tests may increase reporters' size. Hence we can choose a particular part of the test rather than the entire process. To enable this feature, select “retain-on-failure” in the test script.

Under this feature, we capture a screenshot only when there’s a failure in the test.