TLDR;
This comprehensive Playwright with TypeScript course provides a deep dive into end-to-end testing, covering setup, core concepts, and advanced techniques. The course emphasizes building robust, clean, and scalable tests for web applications. Key topics include cross-browser testing, handling various UI elements, managing test configurations, and generating detailed reports.
- Setting up Playwright with TypeScript
- Core Playwright concepts and terminologies
- Advanced testing techniques and reporting
Playwright TypeScript GitHub Repository [0:40]
The video mentions that the code used in the course is available in a GitHub repository.
Playwright with TypeScript Chapter01 [1:17]
Chapter 1 introduces Playwright, its architecture, and compares it with Cypress and Selenium WebDriver. It also covers setting up the test automation environment, writing the first test, debugging, running tests, checking test reports, and using the Codegen tool for recording tests.
What is Playwright? [2:09]
Playwright is an open-source automation testing tool and library used for end-to-end testing of modern web and mobile applications in both headed and headless modes. It also supports API testing. Advantages include cross-browser and cross-platform testing, support for multiple programming languages (TypeScript, JavaScript, Python, .NET, Java), mobile web application testing, automatic waiting, Trace viewer for detailed failure analysis, HTML test reports, parallel execution, dynamic weight assertions, faster and reliable testing, state saving, and powerful tooling like Codegen and Playwright inspector. Limitations include resource consumption, lack of support for desktop application automation and legacy browsers (like Internet Explorer), and a smaller community compared to Selenium WebDriver.
Playwright Architecture [10:32]
Playwright's architecture consists of two main components: the client (where automation tests are written) and the Playwright Node.js server. The client uses languages like TypeScript, JavaScript, Python, .NET, or Java. The Playwright Node.js server communicates with browser engines using the Chrome DevTools Protocol (CDP) and websockets protocol. The client converts automation tests into JSON format and sends them to the server over the websocket protocol. The server then communicates with the browser engines using the CDP protocol, captures test execution information, and sends it back to the client.
Playwright vs Cypress vs Selenium WebDriver [13:00]
Playwright offers easy setup with JavaScript and TypeScript, supports multiple programming languages, and is very fast with default parallel execution. It supports Chromium, Chrome, Edge, Firefox, and WebKit browsers. Cypress is simple and fast for JavaScript, but only supports JavaScript and TypeScript and has limited browser support (Chrome, Edge, Electron). Selenium WebDriver has a complex setup, supports multiple languages (Java, Python, JavaScript, C#, Ruby, PHP), but is slower and can be flaky. Playwright and Cypress support TypeScript, while Selenium does not directly support TypeScript. Playwright and Cypress provide detailed debugging information, while Selenium's debugging is less detailed. Playwright's community support is growing rapidly, while Selenium has a large and mature community.
Softwares required playwright testing [18:06]
The essential software for Playwright with TypeScript includes an operating system, Node.js, and VS Code. TypeScript is also required, but it typically comes with Node.js. Git and GitHub are needed for repository creation and pipeline setup. Postman is used for manual API testing, while Android Studio is required for mobile app testing.
Download & Install NodeJS [19:35]
To install Node.js, navigate to nodejs.org, select the pre-built installers tab, and choose the latest stable version for your operating system (Windows, Linux, or macOS) and processor architecture (x64, x86, ARM64). Download the .exe file and follow the installation instructions. After installation, verify by typing node -v in the command prompt or terminal, which should return the installed Node.js version.
Download & Install VS Code [22:04]
To install Visual Studio Code, go to code.visualstudio.com and download the installer for your operating system (Windows, Ubuntu, Fedora, or macOS). Follow the straightforward installation steps, accepting the agreement and clicking "Next" to install. Once installed, search for "Visual Studio Code" in the start menu to open the application.
Setup Playwright TypeScript using VS Code [23:47]
To set up Playwright with TypeScript in VS Code, first install the "Playwright Test for VS Code" extension from Microsoft. Then, press Ctrl+Shift+P (or Cmd+Shift+P on macOS) and type "Install Playwright." Select the "Install Playwright" option, choose the browsers you want to install (Chromium, Firefox, WebKit), and select TypeScript as the programming language. Click "OK" to start the installation, which will set up the project with TypeScript and install the selected browsers.
Run, Debug & Filter Playwright Tests [43:21]
To run, debug, and filter Playwright tests in VS Code, navigate to the testing icon on the left side to access the Test Explorer. Here, you can run individual tests by clicking the arrow icon next to the test name or run all tests within a spec file by clicking the arrow icon next to the file name. To debug a test, set a breakpoint in the code and click the "Debug Test" icon next to the test name. You can filter tests by typing in the search box to find tests by name or by using the filter icon to show only failed or executed tests.
Install Playwright TypeScript using Command/Terminal [47:20]
To install Playwright with TypeScript using the command prompt or terminal, use the command npm init playwright@latest. This command will guide you through setting up the project, asking you to choose TypeScript or JavaScript, select a tests folder, add GitHub Actions workflow (optional), and install Playwright browsers. After the setup is complete, you can open the project in VS Code.
Record Playwright Test using VS Code [55:17]
To record a Playwright test using VS Code, first, go to the testing icon in the Test Explorer and click the Playwright icon with the right arrow. Then, click "Record new." This opens a browser and creates a new spec file. Perform the actions you want to record in the browser, such as navigating to a URL, clicking links, and entering text. To validate text, click the "AB" icon in the browser and select the text you want to validate. Once finished, VS Code will generate the code for your actions in the spec file.
Run Playwright tests on Chrome, Edge & Firefox browsers [1:02:13]
To run Playwright tests on different browsers (Chrome, Edge, Firefox), go to the Test Explorer in VS Code. Under Playwright, you will see all the projects (browsers) listed. Select the browser you want to run the test on and click the "Run" icon. Alternatively, you can modify the playwright.config.ts file to specify which browsers to use by commenting out or uncommenting the respective project configurations.
Generate readable playwright html test report [1:07:34]
To generate a readable Playwright HTML test report, use the test.step method to add descriptions to each step in your test. This involves wrapping each action with await test.step('Step Description', async () => { // action }). This will display the step descriptions in the HTML report, making it easier to understand the test flow and identify failures.
Commonly used playwright terminologies [1:14:49]
Key Playwright terminologies include: async and await (used for asynchronous functions), test (a function to define individual test cases), page (a browser page object for interacting with the web browser), and expect (used for making assertions to validate conditions).
Write first playwright typescript test & pick locator [1:20:49]
To write your first Playwright TypeScript test, import the Playwright module, define a test using the test function, and use the page object to navigate to a URL and interact with elements. Use the "Pick Locator" tool in VS Code to easily identify element locators. Then, use methods like fill to enter text and click to perform actions. Finally, use expect to validate the results.
Record at Cursor in playwright [1:41:31]
The "Record at Cursor" feature in Playwright allows you to insert new recorded steps into an existing test at the current cursor position. To use this feature, place the cursor where you want to insert the new steps, click "Record at Cursor" in the Test Explorer, perform the actions in the browser, and Playwright will generate the code and insert it at the cursor.
Execute specific spec in playwright typescript [1:53:20]
To run a specific spec file in Playwright, use the command npx playwright test <path_to_spec_file>. Replace <path_to_spec_file> with the actual path to your spec file.
Run playwright typescript test on headless mode [1:57:13]
To run Playwright tests in headless mode, set the headless flag to true in the playwright.config.ts file under the use object.
Run playwright typescript test on headed mode [2:00:40]
To run Playwright tests in headed mode (with a visible browser), set the headless flag to false in the playwright.config.ts file under the use object.
Run playwright test on chrome, edge, firefox using cmd [2:03:13]
To run Playwright tests on specific browsers using the command line, use the command npx playwright test --project <browser_name>. Replace <browser_name> with the name of the browser you want to use (e.g., "chromium", "firefox", "webkit"). Ensure that the respective project configurations are uncommented in the playwright.config.ts file.
Record playwright test using Codegen [2:09:04]
To record Playwright tests using Codegen, use the command npx playwright codegen. This opens a browser and Playwright Inspector. Perform the actions you want to record in the browser, and Codegen will generate the code in the Playwright Inspector window. You can then copy the generated code into your spec file.
Playwright with TypeScript Chapter02 [2:16:20]
Chapter 2 covers capturing screenshots, different types of locators, hard and soft assertions, hooks, Trace viewer, watch mode, keyboard actions, and mouse actions in Playwright.
Capture screenshots in playwright typescript [2:16:52]
To capture screenshots in Playwright, use the page.screenshot() method. You can capture a screenshot of a specific element by using elementHandle.screenshot(), the current page with page.screenshot(), or the full page with page.screenshot({ fullPage: true }). Specify the path where you want to save the screenshot.
Attach screenshot into playwright test report [2:32:30]
To attach screenshots to the Playwright test report, set the screenshot option in the playwright.config.ts file under the use object. You can set it to "off" (never capture screenshots), "on" (always capture screenshots), "only-on-failure" (capture screenshots only when a test fails), or "on-first-retry" (capture screenshots on the first retry of a failed test).
Locators in playwright typescript [2:39:51]
Playwright offers various locator strategies to identify web page elements: getByRole (identifies elements by ARIA role), getByLabel (identifies elements by associated label text), getByAltText (identifies images by alt text), getByTestId (identifies elements by a custom data-testid attribute), getByText (identifies elements by their visible text), getByPlaceholder (identifies input fields by their placeholder text), XPath (identifies elements by XPath expressions), CSS Selectors (identifies elements by CSS selectors), and getByTitle (identifies elements by their title attribute).
Hooks in playwright typescript [3:15:15]
Hooks in Playwright are special functions that execute before or after tests. beforeAll executes once before all tests, afterAll executes once after all tests, beforeEach executes before each test, and afterEach executes after each test. Hooks are used for setting up preconditions, creating test data, establishing database connections, and performing cleanup activities.
Selecting & validating dropdown options in playwright typescript [3:30:07]
To select dropdown options in Playwright, use the selectOption method on the page object. You can select options by their value attribute or by their visible text. To validate dropdown options, identify all the option tags and use expect to ensure that the expected values are present.
Handling iframe playwright & drag and drop in playwright [3:43:52]
To handle iframes in Playwright, first, identify the iframe using page.frameLocator(<locator>). Then, use the returned frame locator to interact with elements inside the iframe. To perform drag-and-drop operations, use the dragTo method on the source element, passing the destination element as the argument.
Mouse actions in playwright typescript [3:56:25]
Playwright supports various mouse actions: left button click (click({ button: 'left' })), middle button click (click({ button: 'middle' })), right button click (click({ button: 'right' })), mouse hover (hover()), and double click (dblclick()).
Keyboard actions in playwright typescript [4:10:25]
Playwright supports keyboard actions using the press method. You can simulate pressing keys like "Enter," "Tab," "Control+A," and "Delete." Use page.keyboard.press() for general keyboard actions and elementHandle.press() to focus on a specific element before pressing the key.
Selecting date field value in playwright typescript [4:23:00]
To select a date in Playwright, first, focus on the date input field. Then, you can either fill the input with a hardcoded date, or interact with the calendar to select a date dynamically. This may involve clicking navigation buttons to reach the desired month and year, and then clicking the specific date.
playwright typescript assertions - hard & soft [4:42:00]
Playwright supports hard and soft assertions. Hard assertions (expect()) stop test execution immediately upon failure, while soft assertions (expect.soft()) continue execution and report all failures at the end. Common assertions include toBeVisible(), toBeEditable(), toBeEnabled(), toBeEmpty(), toHaveURL(), toHaveTitle(), toHaveText(), and toHaveCount().
Watch mode in playwright [5:11:45]
Watch mode in Playwright automatically reruns tests whenever changes are made to the test files. You can enable watch mode at the project, spec file, or test level by clicking the "Turn on continuous run" icon in the Test Explorer.
Playwright UI Mode [5:15:41]
Playwright UI mode provides a graphical interface for running and debugging tests. Launch it using the command npx playwright test --ui. It offers features like test filtering, running all tests, stopping execution, watch mode, and detailed test information, including live DOM details, screenshots, and recorded test execution.
Trace Viewer in playwright typescript [5:25:20]
The Trace Viewer in Playwright captures detailed information about test executions, including screenshots, logs, and network activity. To enable it, set the trace option to "on" in the playwright.config.ts file. The Trace Viewer helps in investigating test failures by providing a comprehensive view of the test execution.
Playwright with TypeScript Chapter03 [5:37:02]
Chapter 3 covers Playwright annotations (skip and only), grouping tests, tagging tests, repeating test execution, automatically retrying failed tests, parameterizing tests, visual testing, and timeouts.
Playwright annotations - skip & only [5:37:39]
Playwright annotations allow you to control test execution. Use test.skip() to skip a test and test.only() to run only a specific test.
Group & execute tests in playwright typescript [5:44:05]
To group tests in Playwright, use test.describe('Group Name', () => { ... }). This allows you to organize tests into logical groups. You can then run all tests within a group by clicking the arrow icon next to the group name in the Test Explorer.
Tags in Playwright TypeScript [5:50:40]
Tags in Playwright allow you to categorize tests based on functionality, module, or type of testing. Assign tags by adding an object after the test case title: test('Test Title', { tag: ['@smoke', '@regression'] }, async () => { ... }). Run tests by tag using the command npx playwright test --grep @tagname.
Repeat playwright test execution [5:58:03]
To repeat a test execution multiple times in Playwright, use the command npx playwright test --repeat-each <number_of_times>. Replace <number_of_times> with the number of times you want to repeat the test.
Automatically retry/rerun failed test in playwright [6:01:24]
To automatically retry failed tests in Playwright, set the retries option in the playwright.config.ts file. The first parameter is for the pipeline execution and the second one is for the local execution.
Parameterize tests in playwright typescript [6:07:42]
To parameterize tests in Playwright, use a loop to iterate over a set of data and pass each value to the test. This allows you to run the same test with different inputs.
Visual Testing or Visual comparison in playwright typescript [6:16:00]
To perform visual testing in Playwright, use the toHaveScreenshot() method. This method compares a screenshot of an element or the entire page to a baseline snapshot. If the screenshots do not match, the test fails.
Timeouts in playwright [6:34:01]
Playwright provides several timeout options: timeout (global test execution timeout), test.setTimeout() (individual test timeout), expect.setTimeout() (assertion timeout), and actionTimeout (timeout for actions like clicking or filling).
Playwright with TypeScript Chapter04 [6:54:05]
Chapter 4 covers tsconfig.json file, browser context, executing only last failed tests, handling alerts/popups, Playwright test reports, recording video of test execution, parallel test execution, integrating Allure report, and handling checkbox & radio buttons.
tsconfig.json file in playwright typescript [6:54:45]
The tsconfig.json file is used to configure TypeScript options for a Playwright project. It improves VS Code IDE experience, specifies project-wide configurations, and helps with build and compilation. Key options include target (specifies the ECMAScript target version), strict (enables strict type checking), and include (specifies files or directories to include in compilation).
Browser context in playwright [7:01:30]
Browser context in Playwright allows you to create multiple isolated browser sessions within a single test. Use browser.newContext() to create a new browser context and context.newPage() to create a new page within that context. This is useful for testing scenarios that require multiple users or sessions.
Execute only last failed tests in playwright [7:11:54]
To rerun only the last failed tests in Playwright, use the command npx playwright test --last-failed. This command uses the information from the test-results directory to identify and rerun only the tests that failed in the previous execution.
Handling alerts/popups in playwright [7:19:49]
To handle alerts and popups in Playwright, use the page.on('dialog', async dialog => { ... }) method to listen for dialog events. Inside the event listener, you can use dialog.accept() to click "OK," dialog.dismiss() to click "Cancel," and dialog.message() to get the text from the dialog. For prompt popups, use dialog.accept(text) to enter text into the prompt and click "OK."
Playwright test reports - html report, json report, junit report etc. [7:40:41]
Playwright supports multiple test report formats. To generate HTML reports, include html in the reporter array in playwright.config.ts. To generate JSON reports, include json and specify the output file. To generate JUnit XML reports, include junit and specify the output file. To generate list reports, include list. To generate dot reports, include dot.
Recording video of test execution in playwright [8:00:26]
To enable video recording of test executions in Playwright, set the video option to "on" in the playwright.config.ts file under the use object. This will record a video of each test execution and attach it to the HTML report.
Parallel/parallelism test execution in playwright typescript [8:03:04]
To enable parallel test execution in Playwright, set fullyParallel to true in playwright.config.ts and configure the number of worker processes using the workers option. You can also specify the number of workers using the command line with npx playwright test --workers <number_of_workers>.
Integrating allure report with playwright [8:09:56]
To integrate Allure reports with Playwright, install the allure-playwright plugin and add allure-playwright to the reporter array in playwright.config.ts. After running the tests, generate the Allure report using allure generate allure-results --clean and open it with allure open.
textContent(), innerText(), getAttribute() in playwright [8:19:50]
Playwright provides methods to extract text from web elements: textContent() returns the combined text content of an element and its descendants, innerText() returns the visible text of an element, and getAttribute(attributeName) returns the value of a specified attribute.
Iterating matching elements in playwright [8:31:09]
To iterate through all matching elements in Playwright, use a for...of loop, a regular for loop, or a combination of a for loop and the nth method.
Handling checkbox & radion buttons in playwright [8:46:46]
To work with checkboxes and radio buttons in Playwright, use the check() method to select them and the toBeChecked() assertion to verify if they are checked. Use expect(locator).not.toBeChecked() to verify if they are unchecked.