To continue providing the best service and quality of work to our clients, we will be revising the pricing for our sprint based Svelte and SvelteKit development services . The new pricing will be effective from 1st March 2024 .

Stay tuned for more details, and feel free to reach out to us for any questions.

E2E testing with SvelteKit and Playwright

Justin's profile pic

Justin Ahinon

Last updated on

Enter your email to get this article emailed to you

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.

This scenario and definition come from an article I wrote (in French) on my old blog a couple of years ago. You can check it out here: https://segbedji.com/decouverte-tests-de-bout-en-bout/

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.

Choose Playwright when creating a new SvelteKit project

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:

BASH

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.

TYPESCRIPT

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.

TYPESCRIPT

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.

Accessibility tree in Chromium

We can run our test with the following command:

BASH

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

BASH

See the documentation for more information about these options.

Get help with your Svelte or SvelteKit code

Got a Svelte/Sveltekit bug giving you headaches? I’ve been there!

Book a free 15 min consultation call, and I’ll review your code base and give you personalized feedback on your code.

P.S. If you have a bigger problem that may need more than 15 minutes, you can also pick my brain for a small fee. 😊 But that’s up to you!

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.

You might also like these blog posts

A lovely bath

State in URL: the SvelteKit approach

Learn how SvelteKit handle stateful URL, updating states in URL, data invalidation.

A lovely bath

Understanding environment variables in SvelteKit

Environment variables are an important feature of NodeJS applications. In this article, we will learn how SvelteKit makes use of them and how to use them effectively.