1# "Introduction to WPT" video transcript 2 3<iframe 4 width="560" 5 height="315" 6 src="https://www.youtube.com/embed/zuK1uyXPZS0" 7 frameborder="0" 8 allow="autoplay; encrypted-media" 9 allowfullscreen></iframe> 10 11**Still image of the WPT logo. The song ["My 12Luck"](http://brokeforfree.bandcamp.com/track/my-luck) by [Broke for 13Free](http://brokeforfree.com/) (licensed under [Creative Commons Attribution 143.0](https://creativecommons.org/licenses/by/3.0/)) 15plays in the background.** 16 17> Hello, and welcome to the Web Platform Tests! 18> 19> The goal of this project is to ensure that all web browsers present websites 20> in exactly the way the authors intended. 21> 22> But what is the web platform, exactly? You can think of it as having three 23> main parts. 24 25**A top-down shot of a blank sheet of graph paper** 26 27> First, there are the web browsers. 28 29A hand places a paper cutout depicting a browser window in the lower-right 30corner of the sheet. 31 32> Applications like Firefox, Chrome, and Safari allow people to interact with 33> pages and with each other. 34> 35> Second, there are the web standards. 36 37A hand places a paper cutout depicting a scroll of parchment paper in the 38lower-left corner of the sheet. 39 40> These documents define how the browsers are supposed to behave. 41 42**A screen recording of a web browser** 43 44`https://platform.html5.org` is entered into the location bar, and the browser 45loads the page. 46 47> That includes everything from how text is rendered to how augmented reality 48> apps are built. Specifying it all takes a lot of work! 49 50The browser clicks through to the Fetch standard and begins scrolling. 51 52> And as you might expect, the standards can get really complicated. 53 54**Return to the graph paper** 55 56A hand draws an arrow from the cutout of the scroll to the cutout of the 57browser window. 58 59> The people who build the browsers use the specifications as a blue print for 60> their work. A shared set of generic instructions like these make it possible 61> for people to choose between different browsers, but only if the browsers get 62> it right. 63 64A hand places a cutout representing a stack of papers on the top-center of the 65sheet and draws an arrow from that cutout to the cutout of the browser window. 66 67> To verify their work, the browser maintainers rely on the third part of the 68> web platform: conformance tests. 69 70A hand draws an arrow from the cutout of the scroll to the cutout of the tests. 71 72> We author tests to describe the same behavior as the standards, just 73> formatted in a way that a computer can understand. 74 75A hand draws an arrow from the cutout of the browser window to the cutout of 76the scroll. 77 78> In the process, the maintainers sometimes uncover problems in the design of 79> the specifications, and they recommend changes to fix them. 80 81A hand draws an arrow from the cutout of the tests to the cutout of the scroll. 82 83> Test authors also find and fix these so-called "spec bugs." 84 85A hand draws an arrow from the cutout of the browser window to the cutout of 86the tests. 87 88> ...and as they implement the standards, the maintainers of each browser 89> frequently write new tests that can be shared with the others. 90> 91> This is how thousands of people coordinate to build the cohesive programming 92> platform that we call the world wide web. The web-platform-tests project is 93> one of the test suites that make this possible. 94> 95> That's pretty abstract, though! Let's take a quick look at the tests 96> themselves. 97 98**A screen recording of a web browser** 99 100`http://wpt.live` is entered into the location bar, and the browser loads the 101page. 102 103> The latest version of the tests is publicly hosted in executable form on the 104> web at wpt.live. 105 106The browser begins scrolling through the enormous list of directories. 107 108> There, were can navigate among all the tests for all the different web 109> technologies. 110> 111> Let's take a look at a typical test. 112 113The browser stops scrolling, and a mouse cursor clicks on `fetch`, then `api`, 114then `headers`, and finally `headers-basic.html`. 115 116> This test is written with the web-platform-tests's testing framework, 117> testharness.js. The test completes almost instantly, and testharness.js 118> reports that this browser passes all but one subtest. To understand the 119> failure, we can read the source code. 120 121The mouse opens a context menu, selects "View Source", and scrolls to the 122source of the failing test. 123 124> It looks like the failing subtest is for what happens when a `Headers` 125> instance has a custom JavaScript iterator method. That's a strange edge case, 126> but it's important for browsers to agree on every detail! 127 128The mouse clicks on the browser's "Back" button and then navigates through the 129directory structure to the test at 130`css/css-transforms/transform-transformed-tr-contains-fixed-position.html`. It 131displays text rendered at an angle. 132 133> Many tests don't use testharness.js at all. Let's take a look at a couple 134> other test types. 135> 136> When it comes to the visual appearance of a page, it can be hard to verify 137> the intended behavior using JavaScript alone. For these situations, the 138> web-platform-tests uses what's known as a reftest. 139> 140> Short for "reference test", this type of test uses at least two different web 141> pages. 142> 143> The first page demonstrates the feature under test. 144 145The mouse opens a context menu, selects "View Source", and clicks on the `href` 146value for the matching reference. It looks identical to the previous page. 147 148> Inside of it, we'll find a link to a second page. This second page is the 149> reference page. It's designed to use a different approach to produce the same 150> output. 151 152The mouse clicks back and forth between the browser tabs displaying the test 153page and the reference page. 154 155> When tests like these are run automatically, a computer verifies that 156> screenshots of the two pages are identical. 157 158The mouse clicks on the browser's "Back" button and then navigates through the 159directory structure to the test at 160`css/css-animations/animation-fill-mode-002-manual.html`. The page includes the 161text, "Test passes if there is a filled color square with 'Filler Text', whose 162color gradually changes in the order: YELLOW to GREEN." It also includes the 163described animated square. 164 165> Even with testharness.js and reftests, there are many web platform features 166> that a computer can't automatically verify. In cases like these, we fall back 167> to using manual tests. 168> 169> Manual tests can only be verified by a living, breathing human. They describe 170> their expectations in plain English so that a human operator can easily 171> determine whether the browser is behaving correctly. 172 173`https://web-platform-tests.org` is entered into the location bar, and the 174browser loads the page. 175 176> You can read more about all the test types in the project documentation at 177> [web-platform-tests.org](https://web-platform-tests.org). 178 179`https://wpt.fyi` is entered into the location bar, and the browser loads the 180page. 181 182> [wpt.fyi](https://wpt.fyi) is a great way to see how today's browsers are 183> performing on the web-platform-tests. 184 185The browser scrolls to `fetch`, and a mouse cursor clicks on `fetch`, then 186`api`, then `headers`, and finally `headers-basic.html`. 187 188> Here, you'll find all the same tests, just presented with the results from 189> various browsers. 190 191`https://web-platform-tests.live/LICENSE.md` is entered into the location bar, 192and the browser loads the page. 193 194> The web-platform-tests project is free and open source software. From bug 195> reports to documentation improvements and brand new tests, we welcome all 196> sorts of contributions from everyone. 197 198`https://github.com/web-platform-tests/wpt` is entered into the location bar, 199and the browser loads the page. 200 201> To get involved, you can visit the project management website hosted on 202> GitHub.com. 203 204The browser navigates to the project's "issues" list and filters the list for 205just the ones labeled as "good first issue." 206 207> Some issues are more difficult than others, but many are perfect for people who 208> are just getting started with the project. When we come across an issue like 209> that, we label it as a "good first issue." 210 211`https://lists.w3.org/Archives/Public/public-test-infra` is entered into the 212location bar, and the browser loads the page. 213 214> You can also join the mailing list to receive e-mail with announcements and 215> discussion about the project. 216 217`http://irc.w3.org/` is entered into the location bar, and the browser loads 218the page. `web4all` is entered as the Nickname, and `#testing` is entered as 219the channel name. A mouse clicks on the "Connect" button. 220 221> For more immediate communication, you can join the "testing" channel on the 222> IRC server run by the W3C. 223 224**Return to the graph paper** 225 226A hand places a paper cutout depicting a human silhouette on the sheet. It then 227draws arrows from the new cutout to each of the three previously-introduced 228cutouts. 229 230 231 232> We're looking forward to working with you! 233
