Instructions for web-platform-test workshop initially run at the Research Software Engineer 2019 conference

web-platform-test-workshop.md

web-platform-tests workshop

Overview

Running tests

These are quick instructions for how to get the web-platform-tests up and running. For more detailed instructions see the README of the repository at https://github.com/web-platform-tests/wpt/blob/master/README.md.

1. Clone the web-platform-tests repository

git clone git@github.com:web-platform-tests/wpt.git web-platform-tests

2. Install dependencies. At least python 2.7+ (NOT python 3.x), but best to check at https://github.com/web-platform-tests/wpt/blob/master/README.md

3. Launch web server to view tests

./wpt serve

4. Open a browser and navigate to localhost:8000

First example - Content-Length header

This has been done with Google Chrome. It will work with all other browsers but some of the devtools instructions might need modifying.

1. In the web-platform-tests folder, open the 2 files in ./fetch/content-length/
2. content-length.html.headers contains the header information for the HTTP request which sets the Content-Length property to 373
3. content-length.html contains more than 373 characters. When truncated to 373 characters only the word PASS appears in the body and the test passes.
4. Navigate to http://localhost:8000/fetch/content-length/content-length.html
5. Should see a passing test
6. Open devtools (F12 or Ctrl-Shift-I or Cmd-Shift-I)
7. Open Network tab
8. Refresh the page
9. On Network tab confirm that the body returned only contains PASS and that there is a header of Content-Length: 373
10. Edit the content-length.html.headers file so that it is now Content-Length: 380
11. Refresh the page
12. The test is now failing
13. The network tab can be used to show that with 380 characters returned the body is now PASS but FA which is why the test fails.

Current status of tests across main 4 browsers

The site https://wpt.fyi/results/?label=master&label=stable maintains the results when run against all versions of the 4 main browsers (Chrome, Edge, Firefox and Safari).

Navigate to fetch > content-length to see them all passing for the above example.

Second example - Copy/Paste and the clipboard

The async clipboard API allows you to interact with the user's clipboard. The spec is here https://www.w3.org/TR/clipboard-apis/#async-clipboard-api. Specifically the navigator.clipboard object should have 4 methods (read, readText, write, writeText) as defined here https://www.w3.org/TR/clipboard-apis/#clipboard-interface.

1. Launch the web-platform-tests if not already running
2. Navigate to http://localhost:8000/clipboard-apis/async-navigator-clipboard-basics.https.html
3. As of Chrome 75 most of these are failing. Most fixed in Chrome 76. Can check this via https://wpt.fyi/results/clipboard-apis/async-navigator-clipboard-basics.https.html?label=master&product=chrome-75.0.3770.100%5Bstable%5D&product=chrome-76.0.3809.36%2Bbeta%5Bbeta%5D
4. Open devtools in Chrome to see which methods the navigator.clipboard has available
5. Repeat in Firefox devtools