In the last period, in the frontend ecosystem, a new e2e tool has come up and it has started to become famous; its name is Playwright. In this short series, I want to leave you with some information on this and tips on how to get started. What is it? Let's start with what Playwright is. Playwright is a testing framework to handle e2e testing. With Playwright we can write e2e tests and run them in different browsers, like Chrome, Firefox and Webkit. We can run our tests on many platforms like Windows, Mac, Linux or CI, and we can write tests in Typescript, Javascript, Java, Phyton or .Net. If you open the official , you can find these characteristics: website Any browser Any platform One API Resilient No flaky tests No trade-offs No limits Full isolation Fast execution Powerful Tooling In my opinion, the tool reflects all of these characteristics. TicTacToe application I want to use a TicTacToe application built with vite + react in this series. And you can find it . here As you can see, the application is straightforward, but with it, we can start to move to the first steps with Playwright. Install Playwright The first step to use Playwright is installing it, that is easy. Open your terminal and type (I use npm but if you want to use yarn or pnpm read the ). Ok, now the installation asks you some questions: npm init playwright@latest docs Where to put your end-to-end tests? The default option is but I prefer to use the folder . tests e2e Add a GitHub Actions workflow? The default option is ; in this demo, I leave this option to false for now. false Install Playwright browsers (can be done manually via 'npx playwright install')? The default option is , and I used this value true and now you have to wait until the installation ends. When the installation is completed... congratulation, you are ready to get your hands dirty with Playwright! First Look The installation created in your repository 3 new files: playwright.config.ts e2e/example.spec.ts tests-examples/demo-todo-app.spec.ts Let's start with the last one, the easiest 😊 This file contains a list of examples of how you can write tests with Playwright. It uses an application created by the playwright team (a simple to-do app) and illustrates how you can interact with your page. Carrying on with the second one. This file is a quick example of some tests on the playwright website, but it's here only as a placeholder for your tests. And now, the first one, the most important. Playwright uses the file to understand its configuration. Inside it, you can find configurations about the test folder, the timeout used by the expect function, the configurations for the browsers used by Playwright to run the tests, and more. playwright.config.ts Run your first test It's time to see Playwright in action, so open your terminal again and run the following command . The result is something like this npx playwright test Playwright in this report shows you the result of its execution, and you can check if everything has gone ok. The report shows the result for each browser indicated in the configuration, in this case: Chromium, Firefox and Webkit. Write your first test Ok cool, but now it's time for you to write your first test with Playwright. Before doing this, you have to configure Playwright to be able to run your application before starting with the tests. To do that, you have to open the and add the following configuration playwright.config.ts const config: PlaywrightTestConfig = {
  ...
  webServer: {
    command: "npm run dev",
    port: 5173,
  },
  ...
}; you have to use the same port exposed by vite. N.B. check your port running the command npm run dev And now it's time for your first test. Open the file and rename it to . Then clean everything in the file and leave only the import line . e2e/example.spec.ts e2e/tit-tac-toe.spec.ts import { expect, test } from "@playwright/test"; Now add your first test test("show tic tac toe page", async ({ page }) => {
  await page.goto("/");

  await expect(page).toHaveTitle("Tic Tac Toe");
}); ok, let's see this test together. First of all, you can indicate to Playwright that it is a test using the function. As in every testing framework, the test function's first param is the test's name. The second param is the function to test our application. Using Playwright, this function is always an async function because your tests in these cases are always asynchronous. The first command in this example is a command to say to Playwright to navigate to the home page of our application. As you can see, already this command is async. Now, if the test can navigate to this page, you want to test if the title of the page is "Tic Tac Toe". Yes, it's elementary, but an excellent example of moving your first step. test Now, it's time to check if the test runs in Playwright, but before doing that, you can simplify the interaction with Playwright by adding a new script in the package.json, as shown here ....
   "scripts": {
    ...
    "e2e": "playwright test"
  }, Now in your terminal, you can type and voila, your test is gone ✅ npm run e2e Adding another script in your package.json, you can open the report result in your browser ....
   "scripts": {
    ...
    "e2e": "playwright test",
    "e2e:report": "playwright show-report"
  }, And now, if you run the command in your browser, you can see the result of your first test. npm run e2e:report Ok, I think that's all for now. In this post, you learnt: How to install Playwright How to run your test How to write your first test with Playwright In the next post, we will continue our journey in the Playwright world, but for now, that's all! See you soon, folks. Bye Bye p.s. You can find the result of this post at this link

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

An Intro to the Playwright Testing Framework

Too Long; Didn't Read

Luca Del Puppo

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

An Intro to the Playwright Testing Framework

Too Long; Didn't Read

Luca Del Puppo

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES