Intro to Playwright and TypeScript

In this first class workshop, we focused on doing our "one-time" setup of this project and writing some initial tests with Playwright.

🛑 Prerequisites

• Free GitHub Account
• Git on your machine
• VS Code installed (recommended to follow along, but you can use any IDE)

💻 Setup Machine

1. Create a new GitHub Repo
2. Clone it to your machine
3. Install bun (visit https://bun.sh)
4. Open repo in VS Code

📂 Setup Workspace

Within the Terminal, run this command to initialize this as a TypeScript project:

$ bun init

💡 Multiple files, including node_modules, are added

🧰 VS Code Extensions

• Playwright Test for VSCode
• ESLint
• Gherkin (cucumber logo)

👀 Setup Project

Within the Terminal:

1. Install playwright

$ bun add playwright

2. Install playwright's types

$ bun add @‌playwright/test --dev

3. Add "@playwright/test" to tscong.json > "types" list
4. Add the playwright.config.ts file from our example repo (copy and paste)
5. Create a /tests folder at the project root

🧪 Record a Test

1. Use Playwright extension to Record new test
2. Install drivers (opens prompt only if you need them)
3. Browser opens!
4. Navigate to https://saucedemo.com
5. Add items to cart and complete checkout with assertions along the way
6. Review the newly generated test and break it into parts
7. Use the Playwright extension to run the test in Show browser mode
8. Show Pick locator tool while browser is open
9. See the Test Report folders and add playwright-report to .gitignore
10. Show the playwright test report

$ bun run playwright show-report

11. Run the test in Show trace viewer mode
12. Describe Trace Viewer and how it’s valuable

1️⃣ Activity: Define Features and Scenarios

We don’t just start at a company and start writing tests! We need to learn the context first - the industry, company, apps, personas, problems we’re solving, etc.

1. Have the class break down the Sauce Labs app into Features however they want (ie notepad)
2. Have the class create some test cases or scenarios for a feature
3. Review some examples
4. Create a new /sauce/features folder under /tests
5. Use Gherkin .feature files as our "standard format" for this

• login.feature
• Feature: Login

6. Have the class try and organize their Features and Scenarios into Gherkin files

2️⃣ Activity: Write the automated test for a Scenario

1. Have the class pick a Feature and one scenario to automate
2. They can use everything they’ve learned so far to automate it
3. Review some examples

3️⃣ Activity: Write the automated test for another Scenario

1. Have the class write automated tests for at least one more Scenario in the same Feature
2. Review examples and see what’s good and what’s bad

4️⃣ Activity: Write the automated tests for another Feature

1. Have the class pick another Feature and write all of its Scenarios as automated tests
2. Review examples and see what’s good and what’s bad

📝 Homework: Create the Features, Scenarios, and automated tests to get 100% Test Coverage of SauceDemo

• Use the #autobots channel to share work and ask questions
• Make your repo public so others can review
• Share findings, tips, and tricks as you learn more about Playwright and Test Automation

💡 Remember: This is to learn and expand your skillset. You can copy others' work, but make sure you understand each bit, can explain it in an interview, and can eventually do this on your own!