E2E testing with SvelteKit and Playwright

E2E testing is a great way to ensure your application works as expected for your users. Plus, it's fun to implement, and it is automated.

I have a personal story about E2E testing. When I was a full-time Core Contributor to WordPress at Yoast, one of the projects I worked on was migrating WordPress Core and Gutenberg E2E test suites from Puppeteer to Playwright. This was a great experience for me, and I learned to appreciate the power of Playwright.

In this article, I'll cover how to set up E2E testing with Playwright in your SvelteKit application and how to write your first tests.

For this article, I'll use the countries application that I created for my previous post about state in URL with SvelteKit. You can find the code for this application on GitHub here.

First, what is E2E testing?

I'll try to explain this by using a scenario.

Have you ever tried to test the functionality of an application or website you have created? Imagine, for example, having to go to each page of your application and manually test each of the functionalities. A click on a button, adding content, deleting content, inserting data, etc. Not very enchanting, right?

Now imagine that you have to do this for each new version of your application. It gets annoying very quickly, doesn't it? Let's go a step further and assume that you have to do this every time a new feature is included in the application; to make sure that it doesn't interfere in an unintended way with another one.

You should already begin to see the limitations of such a method.

E2E testing offers a more automated and efficient way to test the functioning of an application. The philosophy of these tests is to simulate a user's journey through an application from start to finish.

The idea here is to recreate conditions similar to those that a real user would encounter when using the application. Then, to simulate the user's journey and report the different elements that don't work as expected.

How does Playwright come into the picture

Playwright is just one of the many E2E testing frameworks available. It does what most of these frameworks do (automating the browser, simulating user actions, etc.), but it does it very efficiently and elegantly.

Setting up Playwright with SvelteKit

Generally, you have two options when it comes to setting up Playwright with SvelteKit.

When you are creating a new project with create-svelte, the CLI prompts you to choose an E2E testing framework, Playwright . If you choose that option, you'll have all the Playwright dependencies installed and the configuration files set up for you.

This option works best if you're sure at the beginning of your project that 1) you'll need E2E testing and 2) you'll use Playwright. If you're unsure about either of these, you can add Playwright later.

The second option is to add Playwright to an existing SvelteKit project. This is what I'll cover in this article.

Adding Playwright to an existing SvelteKit project

Playwright provides a CLI tool (create-playwright) that helps you quickly scaffold an E2E test setup in your project. This saves you the time of installing dependencies and setting up configuration files manually.

You just need to run the following command in your project's root directory:

This command does the following:

• Adds the latest stable version of  @playwright/test  as a dev dependency to your  package.json  file.

• Creates tests  and  tests-examples  folders in your project's root directory. These two folders are used to store your tests and examples respectively.

• Adds  /test-results/ ,  /playwright-report/ , and  /playwright/.cache/  folders to your  .gitignore  file (if it exists).

• Creates a  playwright.config.(ts|js)  file in your project's root directory. This file contains the configuration for Playwright.

Some of these options are configurable with the CLI tool. You can check out the documentation for more information.

For the sake of this article, I will update the Playwright config to only use Chromium to run our tests (by default, Playwright uses Chromium, Firefox, and WebKit). You can check the config here. in.

What are we going to test?

Before even writing a single line of test, it is good practice to think about what we want to test. This will help define the scope of the tests and avoid writing tests that are irrelevant.

In our case, our countries application is quite simple, so we will just test a few scenarios:

• The user can navigate to the home page and see the list of countries.

• By default, Africa is selected in the region filter.

• When the user selects a region, the list of countries is filtered accordingly.

• When the user selects a region, the URL is updated accordingly.

• When the user directly navigates to a URL with a region selected, the list of countries is filtered accordingly.

• When the user directly navigates to a URL with a region selected, the region filter is updated accordingly.

These are quite simple tests, but they will help us get started with Playwright and know how to write tests for your SvelteKit applications.

Writing our first test

Since all our tests will run on the same base URL, we can define this in the Playwright config file.

Setting this option in the config file will make it available to all our tests, and we could do something like this:

• go to  /  to navigate to the home page.

• go to  /?region=americas  to navigate to the home page with the Americas region selected.

Now that we have our Playwright setup, we can start writing our first test. Let's create a  countries.spec.ts  file in the  tests  folder.

We will inspire ourselves from the example provided by Playwright to write our first test.

This test is quite simple. We are just checking that the page has a table with at least 59 rows. Playwright provides some nice locators that allow retrieving elements from the DOM. In this case, we are using the  getByRole  method to retrieve the table and the rows.

You can quickly find out which roles are available for a given element by the accessibility tree in the inspector panel of your browser.

We can run our test with the following command:

They are also a few options to run tests in headed or in debug mode:

See the documentation for more information about these options.

Wrapping up

To keep this article short, I didn't illustrate all the tests for the scenarios we defined earlier. However, you can check out the full code in the GitHub repository.

The main thing to remember from this post is that E2E tests can be a great addition to your SvelteKit project and will be very helpful to ensure that your application is working as expected. Even by working on the tests for this article, I found a few bugs in my application that I would have missed otherwise.

I hope this article will help you to get started with Playwright and SvelteKit. If you have any questions or feedback, feel free to reach out to me.