How do you locate the parent of an element with Playwright?

In this article I'll cover 5 different ways to locate a parent element! One common challenge with UI automation is trying to access data from or control an element on a webpage that doesn't have a unique identifier. For example, given the below Challenging DOM page,

How do I test a website that has a page redirect with Playwright?

While working across different web applications you are bound to run into situations where a link or an action on a web page causes a redirect. This can happen via javascript or via http requests. A decent guide on ways redirects can be implemented can be found here. Example Website

How do you send the details of a Playwright Test run to a Slack channel via Github Action? - Part 2

A few weeks ago I posted about slack-playwright-report npm package, which allows you to send basic playwright results to a slack channel via a custom reporter within the Playwright test run. Today I'll provide examples of how to send not just the result (pass/fails) but

Is it possible to get a parsable file with the list of all passed or failed tests after a Playwright Test run?

When I went to go answer this question at the beginning of my Playwright journey, I wasn't able to find a solution that worked for me. Thankfully the Playwright team has built the reporters functionality where it's easy to create your own custom reports. This lead

How do I run a subset of tests with Playwright Test Runner using grep functionality?

When running your playwright tests depending on how large your suite is, you will get to a point where you may only want to run a subset of tests. You can achieve this goal through a few different ways (setting up different projects, different repos, etc..), but today I'

How do I access the browser clipboard with Playwright?

I recently ran into an issue where I wanted to interact with a section of the system I was testing that had 'Copy to Clipboard' functionality. This was specifically a link that I could generate and then share out. This part of our system was a part of

Is it possible to get the current Playwright test name while the test is running?

This post is specifically for Playwright Typescript using the Playwright Test Runner. The Playwright team has included a TestInfo class, that includes this information, and a whole lot more! test.describe("/admin", () => { test("login with valid user", async ({ page }, testInfo) => { await page.goto("

Is it possible in Playwright to conditionally click an element depending on which one is visible?

A question was recently asked in the Playwright Slack Channel asking if it was possible to click on whichever element was visible out of 2. There was an answer that was provided that allowed me to dive in and learn more about promises in JavaScript. The solution used the Promise.

How do you send test results to a Microsoft Teams channel when Playwright tests finish?

In the previous article I showed off how to use the playwright-slack-report package to send slack notification from within your Playwright Test run. One of the followup questions people were asking was is it possible to send notifications to Microsoft Teams as well? At the moment this isn&

How do you send Slack messages to a channel when Playwright Tests Finish? - Playwright-Slack-Report

There are a few ways to tackle this problem I'll start with the easiest solution first in this post which is only for Typescript/Javascript projects. 💡Part 2 to this guide can be found here, which covers sending results to slack via GitHub actions. Playwright-Slack-Report Ryan

Is there a way to conditionally skip the Playwright Visual Comparison toMatchSnapshot() based on if the test is running in headed or headless mode?

I recently ran into a scenario where I was attempting to have a Visual Comparison test within a login test, and ran into a slight difference in the way headless and headed versions of chrome handled a scroll bar. * I get a scrollbar from screenshot when running headless: false * I

Use Playwright getByTestId() locator with your own custom test id name.

One of the new page locators that was released with v1.27 was await page.getByTestId("username") makes utilizing custom test attributes easy! Take the example HTML below for a login. In the 3 input fields there is a custom data attribute data-test-id below. <!DOCTYPE