How to test websites: Using SIRV and Playwright for test driven development (TDD)

I've been working on a few websites, for our wedding and for a food translation website for translating food while traveling. One of the fun things I've discovered is how to test these websites, and ensure everything is working.

What is test driven development (TDD)?

Two tools I found—or rather, was told about—called SIRV and Playwright, can help you run your website, and test parts of the site. Once you've done some tests and figured out how to make things better, you can make updates and changes based on those tests. This is called test driven development, where testing reveals gaps in your application and you make changes based on your testing.

Usually these gaps come in the form of a test failing. For example, if you have a form on your website and it fails when entering punctuation under dietary requirements, then you can change the form input to allow for punctuation marks. This makes your application better for your users and you now have new features based on the original tests you ran.

So how do you write tests for your applications?

What is SIRV and Playwright?

SIRV is a static site server. It's optimised middleware for serving requests to static assets. Thus, SIRV works best if you have a static site.

Playwright on the other hand is a testing method for web applications. Using these together, means that Playwright is the tool we will use to write and run tests. SIRV is the interface where we can see our application running, and see which tests are passing or failing.

Writing tests

To test your code, you'll need to write tests. In this example, I'm writing a test to see if I have a certain word or heading on a webpage. I used GitHub Copilot to help write a test to do this. The Playwright documentation gave me the correct starting point for writing the test.

In order to use Playwright for test writing, you'll need to import it. Here's the starting point for writing your test:

import { test, expect } from '@playwright/test';

I built a website for our wedding, and I wanted to test to see if the heading "Mish and Max" was detected on the page. So here's the code I used to test this:

test('Contact Mish and Max', async ({ page }) => {
    // Navigate to the page
    await page.goto('http://localhost:8080/contact.html');

    // Assert that the title says "Contact Mish and Max"
    await expect(page).toHaveTitle("Contact Mish and Max")
});

You'll to add a new file to your project with the extension .spec.test. Make sure you save it, and save it each time you make changes. Now that we have the test written, let's run it.

Using SIRV and Playwright for testing

Firstly, you'll need Node for this to work. Follow the guide in the Node.js docs to install Node for Windows, MacOs, or Linux.

When you are ready to test your code, open a terminal in VS Code, or your editor of choice. I'm using VS Code so the demos here use VS Code. Open the terminal by selecting View > Terminal from the menu bar, or by pressing the Ctrl + ` keyboard shortcut.

Once you have the terminal, there are some commands you need to run:

npm install @playwright/test - this sets up the Playwright tests by installing the testing library.

npx playwright install - this downloads a testing version of Chrome, FireFox, Safari, and others.

npx sirv-cli . - this runs the local version of SIRV for testing.

Now that you have SIRV and Playwright setup and ready, we can run the tests. Open a new terminal in VS Code (or your editor of choice), and run the following command:

npx playwright test --ui This runs the test and opens a new window where we'll be able to run and see the tests running.

Here are all the commands above running:

Playwright terminal test window:

Reading and fixing the test

We can see in the test above that it fails on run. When we look into why this happens, we can determine how to fix it. By looking at the "Errors" tab, we can see what error occurred:

In this instance, it says:

Expected string: "Contact Mish and Max"
Received string: "Contact"

In other words, it expected to receive "Contact Mish and Max", but instead, it says "Contact". If I have a look at my *.html file, we can see I have two <title> tags:

HMTL reads the first title tag only, even if there are other title tags. We can quickly fix this error by changing the first title tag to read <title>Contact Mish and Max</title>. Now we can run the test again:

This time, we see the ✔️ and the test passes 🎉.

Writing tests and writing code

Now that you know how to write and run tests with SIRV and Playwright, you can go ahead and write more complex tests. For example, on the same contact form above, I wrote a test—using the help of GitHub Copilot—to check if the contact form can be filled out and submitted:

I can run this test, and step through each part of the test, seeing in the UI where the changes are being made on the website:

Give this a try yourself, and let me know what tests you are writing, and if this guide was helpful.