1:37:40
Playwright with TypeScript | Setup Environment & Writing Tests ( Session 1)
SDET- QA
Overview
This video introduces Playwright with TypeScript, focusing on setting up the development environment and writing basic automated tests. It covers the prerequisites like Node.js and VS Code, the installation process using a single command, and an explanation of the project's file structure, including `playwright.config.ts` and `package.json`. The session also delves into writing a simple test case, explaining core concepts like fixtures (`page`), asynchronous programming (`async`/`await`), and assertions, before demonstrating how to run tests in headless mode.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Playwright is a Node.js-based automation framework supporting TypeScript, JavaScript, Python, and Java.
- The official Playwright documentation is comprehensive and a valuable resource for learning.
- Prerequisites for setting up Playwright include Node.js (which includes npm) and a code editor like VS Code.
- TypeScript and JavaScript code in Playwright are very similar; knowledge of TypeScript is sufficient.
Understanding the prerequisites and the framework's foundation ensures a smooth setup and effective learning experience.
The video mentions visiting `playwright.dev` to explore supported languages and documentation.
- Create a new project folder and open it in VS Code.
- Install Playwright using the command `npm init playwright@latest` in the VS Code terminal.
- The installation process prompts for language choice (TypeScript/JavaScript), test directory location, and GitHub Actions integration.
- Playwright automatically installs necessary browsers (Chromium, WebKit, Firefox) by default.
This step-by-step installation guide allows learners to quickly set up a functional Playwright project.
Executing `npm init playwright@latest` in the terminal and following the interactive prompts.
- The `node_modules` folder contains all installed packages, including Playwright.
- The `tests` folder is where all test files should reside, as configured in `playwright.config.ts`.
- Test files should have the `.spec.ts` (for TypeScript) or `.spec.js` (for JavaScript) extension.
- `playwright.config.ts` is the configuration file for setting up browsers, test directories, and other project-wide settings.
- `package.json` manages project metadata and dependencies, similar to `pom.xml` in Maven projects.
Familiarity with the project structure is crucial for organizing tests, understanding configurations, and managing dependencies.
The default folder structure includes `node_modules`, `tests`, `playwright.config.ts`, and `package.json`.
- Tests are written within the `tests` folder using `.spec.ts` files.
- Import `test` and `expect` functions from the `@playwright/test` module.
- The `test` function takes a title and an asynchronous arrow function as parameters.
- The `page` fixture, representing a browser page, is passed as a parameter to the test function.
- Use `page.goto(url)` to navigate to a web page.
- Use `expect(page).toHaveTitle(expectedTitle)` to assert the page's title.
This section provides the foundational knowledge for creating automated test scripts.
Writing a test to verify the title of a given URL using `test('verify page title', async ({ page }) => { await page.goto('...'); expect(page).toHaveTitle('...'); });`.
- Playwright operations are asynchronous, meaning they don't necessarily complete before the next line of code executes.
- The `async` keyword is used to define an asynchronous function, enabling the use of `await`.
- The `await` keyword pauses the execution of the function until a Promise is resolved or rejected.
- All Playwright actions that interact with the browser (like `goto`, `click`, `toHaveTitle`) return Promises and should be `await`ed.
- Synchronous operations (like `console.log`) do not return Promises and do not need `await`.
Understanding asynchronous programming is essential for correctly writing and executing Playwright tests, preventing race conditions and ensuring reliable automation.
Using `async ({ page }) => { await page.goto('...'); await expect(page).toHaveTitle('...'); }` to ensure navigation and assertion complete before the test finishes.
- Tests are executed using the command `npx playwright test` in the terminal.
- By default, tests run in headless mode, meaning the browser UI is not visible.
- Playwright runs tests in parallel across multiple workers (browser instances) for faster execution.
- Each test is executed on all configured browsers (e.g., Chromium, Firefox, WebKit) by default.
- The output indicates the number of tests run, workers used, and the pass/fail status.
Knowing how to run tests and interpret the output is crucial for verifying test results and debugging.
Executing `npx playwright test` and observing the output showing tests running in parallel across different browsers.
Key takeaways
- Playwright is a powerful, modern automation framework that leverages Node.js.
- A solid understanding of Node.js, npm, and TypeScript is fundamental for using Playwright effectively.
- The `npm init playwright@latest` command simplifies the setup process significantly.
- The `playwright.config.ts` file is central to configuring how your tests will run.
- Mastering `async`/`await` is critical for handling Playwright's asynchronous operations.
- Tests should ideally contain a single assertion for better clarity and error isolation.
- By default, Playwright runs tests in headless mode and in parallel across multiple browsers.
Key terms
PlaywrightTypeScriptNode.jsnpmVS CodeFixturePage Object Model (Implicit)asyncawaitPromiseHeadless Modeplaywright.config.tspackage.jsonAssertion
Test your understanding
- What are the essential prerequisites for setting up a Playwright project with TypeScript?
- How does the `npm init playwright@latest` command streamline the installation process?
- Explain the purpose of the `playwright.config.ts` file and its key configurations.
- What is the role of `async` and `await` in Playwright test execution, and why are they necessary?
- How can you run your Playwright tests, and what does it mean for them to run in 'headless mode'?