Blog

Playwright Cheatsheet: Quick Tips for Testers

by Hannah Rivera | Aug 12, 2024 | Automation Testing, Blog, Top Picks | 0 comments

Playwright is an incredibly popular and powerful tool for end-to-end automation testing of modern web applications. It offers great advantages such as faster execution speed, great documentation, and a slew of built-in features for reporting, debugging, parallel execution, and so on. If you are thinking about building your test automation framework with Playwright or migrating from a different tool, our comprehensive Playwright Cheatsheet will help you get started with the tool quickly. As an experienced automation testing service provider, we have used Playwright in our projects for different needs and we have covered some of Playwright’s most unique and advanced methods, designed to make your testing and automation processes more efficient and effective.

Playwright Cheatsheet

We have structured our Playwright Cheatsheet in a way that it is easy for both beginners to learn and experts to quickly refer to some important snippets they might be looking for.

Basic Commands

• Browser, Context Management

• Selectors & Mouse Interactions
• Locators
• File and Frame Handling
• Windows Handling

Advanced Interactions

• Special Capabilities
• Network Interception and Manipulation
• Screenshots and Visual Comparisons
• Debugging and Tracing
• Additional Methods

Browser, Context Management

First up in our Playwright Cheatsheet, we’re going to start with the basics to see how to launch a browser instance in regular mode, incognito mode, and so on.

1. Launching a Browser Instance

• chromium.launch(): Initiates a new instance of the Chromium browser.
• browser.newContext(): Establishes a fresh browser context, which represents an incognito mode profile.
• context.newPage(): Generates a new browser tab (page) within the context for interaction.

// Step 1: Initiate a new instance of the Chromium browser
  const browser = await chromium.launch({ headless: false });
  // Step 2: Establish a fresh browser context
  const context = await browser.newContext();
  // Step 3: Generate a new browser tab within the context
  const page = await context.newPage();

2. Creating a Persistent Context

You can use persistent contexts to maintain session continuity and reuse authentication states across tests. It allows for testing scenarios where user sessions need to be preserved.

// Launch a persistent context using the specified user data dir
const context = await chromium.launchPersistentContext(userDataDir, {headless: false });

Selectors & Mouse Interactions

Once the browser instance has been launched, the next steps in the automation will involve keyboard and mouse interactions which we will be seeing now in our Playwright Cheatsheet.

1. Using Selectors for Element Interaction

• page.goto(): Directs the browser tab to a specified URL.
• page.click(): Locates and triggers a button with the identifier Example: ‘submit’.
• page.fill(): Finds an input field with the name ‘username’ and inputs the value.
• page.selectOption(): Identifies a dropdown menu and chooses the option.

await page.goto('https://example.com');
await page.click('button#submit');
await page.fill('input[name="username"]', 'example_user');
await page.selectOption('select[name="city"]', 'New York');

Checkboxes and Radio Buttons: Easily toggle checkboxes and radio buttons using locator.setChecked() in Playwright. This method simplifies the process of both selecting and deselecting options.

// Step 3: Locate a checkbox using its label
const checkbox = page.getByLabel('Terms and Conditions');
// Ensure the checkbox is checked
await checkbox.setChecked(true);
// Step 4: Assert that the checkbox is checked
await expect(checkbox).toBeChecked();

type() : The type method in Playwright is used to simulate keyboard input into a text input field, text area, or any other element that accepts text input.

 await page.getByPlaceholder('Enter your name').type('John Doe');

press(): The press method in Playwright is used to simulate pressing a key on the keyboard. This method allows you to automate keyboard interactions with web pages.

await page.keyboard.press("Enter");

title(): The title method in Playwright is used to retrieve the title of the current web page. You can use this method to extract the title of the web page you are interacting with during your automation or testing scripts.

const pageTitle = await page.title();
console.log(`page title is : ${pageTitle});

check(): The check method in Playwright is used to interact with checkboxes and radio buttons on a web page.

await page.check('input#myCheckbox');
               Or
await page.locator('input#myCheckbox').check();

unCheck(): The uncheck method in Playwright is used to uncheck (deselect) checkboxes or radio buttons on a web page.

await page.uncheck('input#myCheckbox');
                Or
await page.locator('input#myCheckbox').uncheck();

focus(): This method can be particularly useful when you want to simulate user interactions like keyboard input or navigating through a web application using keyboard shortcuts.

await page.locator('input#username').focus();

hover(): The hover method in Playwright is used to simulate a mouse hover action over a web page element. When you hover over an element, it can trigger various interactions or reveal hidden content.

await page.locator('button#myButton').hover();
                or
await page.hover('button#myButton');

textContent(): Although the textContent method is not a built-in method in Playwright, it is a standard JavaScript method used to retrieve the text content of a DOM element.

const element = await page.locator('div#myElement'); 
const textContent = await
 element.textContent()console.log('Text Content:', textContent);

allTextContents(): In Playwright, the allTextContent method is used to find array of multiple elements in the DOM. which returns an array of textContent values for all matching nodes.

const element = page.locator('div#Element');
const textContents = await element.allTextContents();
console.log(`All Text Contents : ${textContents}`);

inputValue(): The inputValue method in Playwright is used to retrieve the current value of an input element, such as a text input, textarea, or password field.

 // Using inputValue to retrieve the current value of the input field
 const inputValue = await page.inputValue('input#username');
 console.log('Current input value:', inputValue);

close(): The close method is the last selector we’re going to see in our Playwright cheatsheet and it is used to close a browser, browser context, or page. You can use this method to gracefully shut down browser instances or specific pages. Here’s how you can use the close method in Playwright.

 // Close the page when done
     await page.close();
 // Close the browser context
      await context.close();
 // Close the browser instance
      await browser.close();

2. Mouse Interactions

Clicks and Double Clicks: Playwright can simulate both single clicks and double clicks on elements.

 // Single click
await page.click('selector');
// Double click
await page.dblclick('selector');

Hover and Tooltips: You can use Playwright to hover over elements and reveal tooltips or activate dropdown menus.

await page.hover('selector');
const tooltip = await page.waitForSelector('tooltip-selector');
const tooltipText = await tooltip.innerText(); // Get text from the tooltip
console.log(tooltipText);

Drag and Drop: Here are the Playwright techniques for simulating drag-and-drop interactions between elements on a webpage.

// Locate the source and target elements
const source = await page.$('source-selector');
const target = await page.$('target-selector');
// Perform drag-and-drop
await source.dragAndDrop(target);

move(): mouse.move(x, y) in Playwright is used to move the mouse to a specific position on the page. This can be useful for simulating mouse movements during automated testing. The x and y parameters represent the coordinates where you want the mouse to move, with (0, 0) being the top-left corner of the page.

await page.mouse.move(100, 100);

dragTo(): This method is useful for automating drag-and-drop interactions in your web application. Let’s see how to use the dragTo() method with a sample snippet in our Playwright cheatsheet.

//Locate the source and target elements you want to drag & drop
const sourceElement = await page.locator('source-element-selector')
const targetElement = await page.locator('target-element-selector')  
// Perform the drag-and-drop action
await sourceElement.dragTo(targetElement)

Pressing and Releasing Mouse Buttons: In Playwright, you can simulate pressing and releasing mouse buttons using the mouse.down() and mouse.up() methods.

const myElement = page.locator('.my-element')
await myElement.mouse.down()  // Press the left mouse button    
await myElement.mouse.up()   // Release the left mouse button

Context Menu: See how Playwright interacts with context menus by right-clicking elements and selecting options.

// Right-click on an element to open the context menu
await page.click('element-selector', { button: 'right' });
// Wait for the context menu to appear
await page.waitForSelector('context-menu-selector', { state: 'visible' });
// Click on an option within the context menu
await page.click('context-menu-option-selector');

Scrolling: Discover how to simulate scrolling actions in Playwright using mouse interactions. Demonstrate scrolling through a long webpage to ensure all content loads correctly or to capture elements that only appear when scrolled into view.

// Click on an option within the context menu
await page.click('context-menu-option-selector');
await page.evaluate((x, y) => { window.scrollBy(x, y); });

Note: Use stable selectors like IDs or data attributes to ensure robust tests; validate mouse interactions by asserting resulting UI changes.

Locators

As we all know, a locator is a tool for locating elements on a webpage and Playwright has a lot of available locators. Now in our Playwright cheatsheet, we’re going to see the several available methods for finding elements, and the chosen parameters are sent to the methods for finding elements.

1. getByRole(): getByRole is used to query and retrieve elements on a web page based on their accessibility roles, such as “button,” “link,” “textbox,” “menu,” and so on. This is particularly useful for writing tests that focus on the accessibility and user experience of a web application.

// Click on an option within the context menu
await page.getByRole('textbox', {name:'Username'}).fill(‘vijay’);

2. getByText(): Although getByText() is not a built-in method in Playwright, it is a method that is often used in testing libraries like Testing Library (e.g., React Testing Library or DOM Testing Library) to query and interact with elements based on their text content.

await page.getByText('Forgot your password? ').click();

3. getByPlaceholder(): The getByPlaceholderText method is used to select a DOM element based on its placeholder attribute in an input element.

await page.getByPlaceholder('Username').fill('vijay');

4. getByAltText(): getByAltText() is not a method associated with Playwright; it’s actually a method commonly used in testing libraries like React Testing Library and Testing Library (for various JavaScript frameworks) to select an element by its alt attribute. If you are writing tests using one of these testing libraries, here’s how you can use getByAltText().

await page.getByAltText('client brand banner').isVisible();

5. getByTitle() :getByTitle() method in Playwright is for interacting with an HTML element that has a specific title attribute.If you are writing tests using one of the testing libraries mentioned above, here’s how you can use it

  await page.getByTitle('Become a Seller').click();

File and Frame Handling

As we have seen how to launch the browser instance, use selectors, and handle mouse interactions in our Playwright cheatsheet, the next step would be to see how we can handle files, frames, and windows. Let’s start with files and frames now.

1. Handling File Uploads

• Easily handle file uploads during testing to ensure the functionality works as expected in your application by referring to the below code.
 // Navigate to the page with the file upload form
await page.goto('your-page-url');
// Trigger the file input dialog
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'),
page.click('button-to-trigger-file chooser')]);
// Set the files to upload
await fileChooser.setFiles('path/to/your/file.txt');

2. Interacting with Frames

• Playwright allows you to interact with frames on a web page using methods like frame(), frames(), and waitForLoadState(). Here’s how you can do it.
• Use the frame() method to access a specific frame by its name, URL, or element handle.
• Get Frame using Name FrameSelector :
 const allFrames = page.frames();

• Get Frame using Name Option :
const myFrame = page.frame({name: "frame1"}); 
              or
const myFrame = page.frame("frame1");

• Get Frame using URL option :
const 
Myframe=page.frame({url:"http://autopract.com/playwright/form1/"});

• Get Frame using Selector :
const
myFrame = page.frameLocator("iframe[name='frame1']");

• Navigate within a specific frame using the goto() method.
await frame.goto('https://codoid.com');

• Go back and forward within a frame using the goBack() and goForward() methods
await frame.goBack();
await frame.goForward();

• Wait for a frame to load or reach a specific load state using the waitForLoadState() method.

await frame.waitForLoadState('domcontentloaded');

Best Practices:

Automate file uploads and downloads to streamline file-related workflows. You can switch between frames using IDs or names for seamless interaction.

Windows Handling

Windows handling is an important aspect of web automation and testing, especially when dealing with scenarios where you need to interact with multiple browser windows or tabs. And that is why we have covered it in our Playwright Cheatsheet.

Playwright provides methods for handling multiple browser windows and tabs within a single browser instance. Here’s how you can work with windows handling in Playwright.

 const [newWindow] = await Promise.all([context.waitForEvent('page'),
  await page.getByText('APPLE iPhone 14 (Blue, 128  GB)').first().click()]);
  await newWindow.waitForLoadState();
  expect(newWindow.url()).toContain('apple-iphone-14');

• To switch to a specific window or tab using the page title or URL:
 const secondPage = pages.find((page) => page.url()==='https://codoid.com');
   await secondPage.bringToFront();

• Close a specific window/tab when you are done with it:

    await secondPage.close();

Best Practices:

Manage multiple windows or tabs by tracking handles and switching context as necessary. Make sure to close windows or tabs after tests to maintain a clean testing environment.

Special Capabilities

As stated earlier in our Playwright Cheatsheet, we have also covered advanced interactions in addition to the basic commands. The first of the many advanced interactions we’re going to see special capabilities such as device emulation and record and playback capabilities.

1. Emulating Devices:

• You can emulate a device for responsive testing to ensure your app looks good on various devices. This is crucial for testing mobile responsiveness and user experience.

 const { devices, chromium } = require('playwright');
// Define the device you want to emulate
const iPhone = devices['iPhone 11'];
// Launch a browser and create a new context with device emulation
const browser = await chromium.launch();
const context = await browser.newContext({...iPhone,});

2. Recording and Replaying Actions

• You can automatically generate Playwright scripts with ease by recording your actions within a browser. This speeds up the creation of test scripts by capturing real user interactions.

npx playwright codegen
 

Network Interception and Manipulation

Testing is not just about validating the results with happy paths as users might face numerous challenges in real-world scenarios. One of the common challenges can be with the network and we can manipulate it based on our testing needs. Let’s see how in our Playwright Cheatsheet.

1. Mocking Responses

Intercept and mock network responses to evaluate your app’s handling of different API responses. This is useful for testing error scenarios and verifying API integrations.

// Intercept requests to a specific URL
 await page.route('**/api/data', async (route) => {
// Respond with custom data
  await route.fulfill({
  contentType: 'application/json',
  body: JSON.stringify({ key: 'mockedValue' }) }); });
 

2. Simulating Offline Mode

Test how your application behaves when offline by simulating network disconnections. This ensures that your app handles offline scenarios seamlessly.

  // Set the page to offline mode
  await page.setOffline(true);
  // Navigate to a page and perform actions
  await page.goto('https://example.com');
  // Restore network connection (optional)
  await page.setOffline(false);
 

Screenshots and Visual Comparisons

Screenshots play a vital role in terms of reporting and with Playwright, you have the provision of capturing full-page screenshots and also screenshots of a particular element if required.

1. Screenshots

Capturing a Full-Page Screenshot

• You can take a screenshot of the entire page to visually verify the UI. This is beneficial for visual regression testing to identify unexpected changes.

 // Take a full-page screenshot
await page.screenshot({ path: 'fullpage-screenshot.png', fullPage: true});
 

• There is also a provision to capture a screenshot of a specific element to focus on individual UI components. It helps in verifying the appearance of particular elements.

// Locate the element
 const element = await page.$('selector-for-element');
 if (element) {
// Take a screenshot of the element
 await element.screenshot({ path: 'element-screenshot.png' });
 console.log('Element screenshot taken'); }
 

Debugging and Tracing

The next set of advanced interactions we’re going to see in our Playwright cheatsheet is the debugging and tracing features that enable easier debugging and failure analysis/

Enabling Debug Mode(SlowMo)

• Using Playwright, you can execute tests in a visible browser with slow motion enabled for easier debugging. This helps you see what’s happening in real time and diagnose the issues.

// Launch the browser with slowMo
  const browser = await chromium.launch({
    headless: false, // Run in headful mode to see the browser
    slowMo: 1000 // Slow down actions by 1000 milliseconds (1 second)
  });

Capturing Traces

• You can capture detailed traces to analyze test failures and performance issues. This offers insights into test execution for debugging purposes.

  // Start tracing
  await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://example.com');
// Perform actions
 await page.click('selector-for-button');
 await page.fill('selector-for-input', 'some text');
// Stop tracing and save it to a file
 await context.tracing.stop({ path: 'trace.zip' });

Best Practices:

You can also use console logs and debug statements within tests to troubleshoot issues and enable tracing to capture detailed logs for performance analysis.

Additional Methods

In the final section of our Playwright cheatsheet, we are going to see a few additional methods such as retrying actions, using locator assertions, and forcing colors mode.

Retrying Actions

Retrying actions addresses intermittent issues by repeatedly attempting a failed action until it either succeeds or the maximum number of retries is exhausted.

 const retryDelay = 1000; const maxRetries = 3; // 1 second delay between retries
 await new Promise(resolve => setTimeout(resolve, retryDelay)); // Delay before retrying

Using Locator Assertions

• You can add assertions to ensure elements are visible, improving test reliability. This verifies that critical elements are present on the page.

 // Check if the element is visible
await expect(page.locator('selector-for-element')).toBeVisible();

• Enabled/Disabled State Assertions
await expect(page.locator('selector-for-element')).toBeEnabled();
await expect(page.locator('selector-for-element')).toBeDisabled();

• Text and Count Assertion
await expect(page.locator('selector-for-element')).toHaveText('Expected Text');
await expect(page.locator('selector-for-elements')).toHaveCount(expectedCount);

• Invisibility Assertion

await expect(page.locator('selector-for-element')).toBeHidden();

Forcing Colors Mode

• There is even an option to simulate the high contrast mode for accessibility testing, ensuring usability for all users. This is crucial for testing the accessibility features of your application.

// Force dark color scheme
await page.emulateMedia({ forcedColors: 'dark' });
await browser.close(); })();

Conclusion

Playwright offers an extensive set of features that go beyond basic browser automation. Whether you’re testing complex user interactions, simulating various devices and network conditions, or capturing detailed traces for debugging, Playwright equips you with the tools you need to create reliable and efficient tests. We hope our Playwright cheatsheet will be helpful for you to use all these features with ease.

Playwright Reporting: Customizing the Dot Reporter

by Chris Adams | Jul 26, 2024 | Automation Testing, Blog, Top Picks | 0 comments

Playwright is a popular test automation tool that offers a lot of reporting options for its users such as built-in reporters, custom reporters, and support for integrating third-party reporters. The Playwright’s default in-built reporter is the list reporter. However, when running tests via the CI tool, Playwright will switch to the Dot reporter by default. There is also a good reason why the Dot Reporter is chosen as the default Playwright Reporting option during execution in Continuous Integration tools. We have even made a YouTube video explaining it and recommend you check it out.

Like any tool or feature, there will always be a few drawbacks. Based on our experience of working with Playwright while delivering automation testing services to our clients, we were able to overcome these drawbacks with a few workarounds. So in this blog, we will be sharing how you can customize the Dot reporter to address these drawbacks and enhance your Playwright reporting. But before that, let’s take a look at what the disadvantages are.

Disadvantages of Dot Reporter:

• During the execution process, the Dot Reporter will not display the number of tests completed. So you’ll have to manually count if you want to get the total number of tests executed.
• In the event of a failure, an ‘F’ will appear in red. But the issue is that it will not indicate which specific test has failed during execution.

Customization of Dot Reporter:

As stated earlier, Playwright reporting has built-in options and customizing capabilities as well. So, let’s delve into the customization aspect to address the disadvantages of Dot Reporter. If you prefer to watch the entire step-by-step tutorial as a video, you can check out our video covering the same. Or you can prefer to continue reading as well.

Step 1: Creating Reporter Listener Class

• Create a folder by the name ‘utils’ inside your project directory.
• Create a TypeScript file using the name ‘CustomReporter’ with the below code

import type {Reporter, FullConfig, Suite, TestCase, TestResult, FullResult} from '@playwright/test/reporter';
class CustomReporter implements Reporter {
 }
export default CustomReporter;

Step 2: Configure Reporter Listener in Playwright Config file

• Open the playwright.config.ts file
• Add the reporter listener file that you created in Step 1 in the Playwright config file

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
 testDir: './tests',
 /* Run tests in files in parallel */
 fullyParallel: true,
 /* Fail the build on CI if you accidentally left test.only in the source code. */
 forbidOnly: !!process.env.CI,
 /* Retry on CI only */
 retries: process.env.CI ? 2 : 0,
 /* Opt out of parallel tests on CI. */
 workers: process.env.CI ? 1 : undefined,
 /* Reporter to use. See https://playwright.dev/docs/test-reporters */
 reporter: './utils/CustomReporter.ts',
 /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 use: {
   /* Base URL to use in actions like `await page.goto('/')`. */
   // baseURL: 'http://127.0.0.1:3000',

   /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
   trace: 'on-first-retry',
 },

 /* Configure projects for major browsers */
 projects: [
   {
     name: 'chromium',
     use: { ...devices['Desktop Chrome'] },
   },
{
     name: 'firefox',
     use: { ...devices['Desktop Firefox'] },
   },
{
     name: 'webkit',
     use: { ...devices['Desktop Safari'] },
   },
 ],

});

Step 3: Declare & Initialize Properties

• In the CustomReporter class, add three class properties
  • totalTests-To hold total tests in the test suite.
  • totalTestsExecuted-To count the number of tests that have been executed in the current execution.
  • noOfTestsPerLine-To count the number of test statuses or results to be shown in a line.
• Initialize the properties in the constructor

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
      this.totalTests=0
      this.noOfTestsPerLine=0
      this.totalTestsExecuted=0
   }
}

Step 4: Add the onBegin method

• Add the onBegin method.
• Save the total tests to be executed in the totalTests variable.

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }
 onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }
  
}

Step 5: Add the printTotalExecuted method

This method will be called to print how many tests have been executed against the total tests.

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }

   onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }

   printTotalExecuted(){
       process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
       this.noOfTestsPerLine=0
   }

}

Step 6: Add the onTestEnd method

After the execution of each test, the onTestEnd method will be invoked.

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }
  
   onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }

   printTotalExecuted(){
       process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
       this.noOfTestsPerLine=0
   }

   onTestEnd(test: TestCase, result: TestResult) {

   }

}

Step 7: Print the Total Tests Executed

• Inside the onTestEnd method, check many tests are executed in a line.
• If the count is equal to 50, then invoke the printTotalExecuted method to print the total tests executed so far and the total tests in the test suite.

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }
}

Step 8: Increament totalTestsExecuted & noOfTestsPerLine variables

It is possible to print the skipped status in ANSI Yello color. You can also use different color codes based on your preference. You can check the available color codes here .

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }
}

Step 10: Printing Retry Status

• If a test has Timed out or Failed and Playwright does know what status needs to be marked, then the test will be marked for Retry.
• Since the test will be rerun, we need to decrease the totalTestsExecuted variable to ensure accuracy.

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }

   //Printing the test that marked for retry
   if (test.outcome() === 'unexpected' && result.retry < test.retries) {
       process.stdout.write(`\x1b[33mx\x1b[39m`);
       --this.totalTestsExecuted;
       return;
   }
}

Step 11: Printing Failure Status & Test Title

• Concatenating test title with failure status.
• After printing the status & title, call the printTotalExecuted method to print Total Tests Executed and Total Tests in the Test Suite.

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }

   //Printing the test that marked for retry
   if (test.outcome() === 'unexpected' && result.retry < test.retries) {
       process.stdout.write(`\x1b[33mx\x1b[39m`);
       --this.totalTestsExecuted;
       return;
   }

   //Printing failure status and test name
   if (test.outcome() === 'unexpected' && result.status === 'failed') {
       process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
       this.printTotalExecuted()
       return;
   }

}

Step 12: Other Statuses (Flaky, TimedOut, & Passed)

onTestEnd(test: TestCase, result: TestResult) {
   if (this.noOfTestsPerLine==50){
       this.printTotalExecuted()
   }

   ++this.totalTestsExecuted
   ++this.noOfTestsPerLine

   //Printing Skipped Status in ANSI yellow
   if (result.status === 'skipped') {
       process.stdout.write('\x1b[33m°\x1b[39m');
       return;
   }

   //Printing the test that marked for retry
   if (test.outcome() === 'unexpected' && result.retry < test.retries) {
       process.stdout.write(`\x1b[33mx\x1b[39m`);
       --this.totalTestsExecuted;
       return;
   }

   //Printing failure status and test name
   if (test.outcome() === 'unexpected' && result.status === 'failed') {
       process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
       this.printTotalExecuted()
       return;
   }

   if (test.outcome() === 'unexpected' && result.status === 'timedOut') {
       process.stdout.write('\x1b[31mT\x1b[39m');
       return;
   }

   if (test.outcome() === 'expected' && result.status === 'passed') {
       process.stdout.write('\x1b[32m.\x1b[39m');
       return;
   }

   if (test.outcome() === 'flaky') {
       process.stdout.write('\x1b[33m±\x1b[39m');
       return;
   }

}

Step 13: Finally, Add onEnd Method

• Print total tests executed just in case it is missed before the end of the execution.
• Print the status of the entire execution.

onEnd(result: FullResult) {
   if (this.noOfTestsPerLine !== 0) this.printTotalExecuted();
   console.log(`\nFinished the run: ${result.status}`);
}

Full Code:

import { FullConfig } from '@playwright/test';
import { FullResult, Reporter, Suite, TestCase, TestResult } from '@playwright/test/reporter';

class CustomReporter implements Reporter {
   totalTests: number;
   noOfTestsPerLine: number
   totalTestsExecuted: number

   constructor() {
       this.totalTests=0
       this.noOfTestsPerLine=0
       this.totalTestsExecuted=0
   }

   onBegin(config: FullConfig, suite: Suite) {
       this.totalTests = suite.allTests().length;
       console.log(`Executing ${this.totalTests} test(s)`);
   }

   printTotalExecuted(){
       process.stdout.write(`[${this.totalTestsExecuted}/${this.totalTests}]\n`);
       this.noOfTestsPerLine=0
   }

   onTestEnd(test: TestCase, result: TestResult) {
       if (this.noOfTestsPerLine==50){
           this.printTotalExecuted()
       }

       ++this.totalTestsExecuted
       ++this.noOfTestsPerLine

       //Printing Skipped Status in ANSI yellow
       if (result.status === 'skipped') {
           process.stdout.write('\x1b[33m°\x1b[39m');
           return;
       }

       //Printing the test that marked for retry
       if (test.outcome() === 'unexpected' && result.retry < test.retries) {
           process.stdout.write(`\x1b[33mx\x1b[39m`);
           --this.totalTestsExecuted;
           return;
       }

       //Printing failure status and test name
       if (test.outcome() === 'unexpected' && result.status === 'failed') {
           process.stdout.write('\x1b[31m'+"F("+test.title+")"+'\x1b[39m');
           this.printTotalExecuted()
           return;
       }

       if (test.outcome() === 'unexpected' && result.status === 'timedOut') {
           process.stdout.write('\x1b[31mT\x1b[39m');
           return;
       }

       if (test.outcome() === 'expected' && result.status === 'passed') {
           process.stdout.write('\x1b[32m.\x1b[39m');
           return;
       }

       if (test.outcome() === 'flaky') {
           process.stdout.write('\x1b[33m±\x1b[39m');
           return;
       }

   }

   onEnd(result: FullResult) {
       if (this.noOfTestsPerLine !== 0) this.printTotalExecuted();
       console.log(`\nFinished the run: ${result.status}`);
   }
}
export default CustomReporter;

Conclusion:

In this blog, we have shown how to overcome the Playwright reporting issues usually seen with the Dot Reporter. In addition, you can use the onEnd method to print a summary of the entire execution, including Total Passed, Total Failed, Total Skipped, and Total Flaky.

The customization of Playwright Dot Reporter is a valuable tool for developers and testers looking to enhance their automated testing processes. Through the use of custom reporters, users have the ability to tailor their test reports to fit their specific needs and preferences.

One of the main benefits of using custom reporters is the flexibility it offers. With Playwright Dot Reporter, users can choose which information they want to include in their reports and how they want it displayed. This allows for more targeted and organized reporting, making it easier to interpret test results and identify any issues that may arise.