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

王林
发布: 2024-08-07 15:23:32
原创
929 人浏览过

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:

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

Playwright terminal test window:

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

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:

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

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 twotags:</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172301542124988.png" alt="How to test websites: Using SIRV and Playwright for test driven development (TDD)"></p> <p>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. Now we can run the test again:

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

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:

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

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:

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

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

以上是How to test websites: Using SIRV and Playwright for test driven development (TDD)的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!