DEV Community: samsuthen akbarali

Passing Test Data to onTestEnd Reporter Method in Playwright

samsuthen akbarali — Sat, 11 Nov 2023 06:13:38 +0000

Introduction

When working with Playwright for end-to-end testing, it's essential to gather meaningful data during test execution. In certain scenarios, passing test-specific data, such as configurations or test case details, to the onTestEnd reporter method can be beneficial for comprehensive reporting and analysis. This article provides guidance on how to achieve this in Playwright.

The Scenario

Consider a scenario where you have a test suite iterating over a set of records, and you want to pass individual record data to the onTestEnd method for reporting purposes. Here's a simplified example:

In the onTestEnd method, you need to access the record object for reporting:

Custom Annotations in Playwright

To pass data from each test to the onTestEnd method, Playwright provides the concept of custom annotations. Annotations are key/value pairs accessible via test.info().annotations. While Playwright annotations typically accept key-value pairs, they don't directly support objects. To overcome this limitation, you can stringify the object before storing it in the annotations.

Here's how you can implement this:

Test Implementation

In this example, JSON.stringify is used to convert the uiRecord object to a string before storing it in the annotations.

Reporter Implementation

In the onTestEnd method, the description property of the annotation is parsed back into an object using JSON.parse. Now, you have access to the original uiRecord object for reporting.

Conclusion
By utilizing custom annotations in Playwright, you can efficiently pass test-specific data, even objects, to the onTestEnd reporter method. This approach enhances the reporting capabilities and allows you to gather valuable insights during your test execution.

Enhancing Playwright Test Automation: Real-time Failure Notifications with Microsoft Teams

samsuthen akbarali — Mon, 18 Sep 2023 11:53:48 +0000

Playwright, a versatile and robust testing framework, has gained immense popularity for its ability to automate end-to-end testing across various web applications. However, it's not just about running tests; it's also about monitoring and responding to test results effectively. In this blog, we'll explore how to enhance your Playwright test automation pipeline by setting up real-time failure notifications to a Microsoft Teams channel using webhooks.

Why Real-time Notifications Matter

When you have a suite of automated tests, it's essential to stay informed about their execution status. Real-time notifications provide several advantages:

Faster Issue Resolution: Immediate notifications enable faster identification and resolution of issues, minimizing downtime.
Team Collaboration: Notifications in a Teams channel facilitate collaboration among team members, allowing them to discuss and address failures promptly.
Continuous Monitoring: You can keep a constant watch on your test suite's health without manual intervention.

Let's dive into the implementation steps.

Prerequisites

Before we begin, make sure you have the following in place:

Playwright project set up with your test scripts.
Microsoft Teams channel where you want to receive notifications.
Webhook URL for your Teams channel.

Step 1: Configure Webhook in Microsoft Teams

In your Microsoft Teams channel, click on the three dots (...) to open the context menu and select 'connectors'

Search for 'Incoming Webhook' and click on it.

Follow the prompts to configure the webhook, and you will receive a unique URL. This URL is essential for sending notifications to your Teams channel.

Step 2: Implement Notification Logic

In your Playwright project, implement notification logic for test failures. Here's a sample TypeScript code snippet:

Step 3: Configure Playwright Reporter

You can create a custom Playwright reporter that integrates the notification logic. Here's an example reporter script:

Step 4: Integrate Custom Reporter

Integrate the custom reporter into your Playwright test execution. You can specify it in your test configuration file.

Notification Is Displayed Like This

Conclusion

By implementing real-time failure notifications in your Playwright test automation pipeline, you can streamline issue resolution and collaboration within your team. These notifications empower you to act swiftly, ensuring the reliability of your web applications. Playwright, combined with Teams integration, provides a powerful solution for modern test automation.

Enhance your testing workflow today by implementing these real-time notifications and experience the benefits firsthand.

Happy testing!

Extract Text from Image using Tesseract in Playwright TypeScript Project

samsuthen akbarali — Tue, 15 Aug 2023 11:14:45 +0000

Sometimes, you might come across a situation where you need to extract text from an image within your Playwright TypeScript project. This could be for various reasons, such as extracting information from screenshots or images generated during test execution. In this guide, we'll explore how to achieve this using Tesseract.js, a popular JavaScript library for Optical Character Recognition (OCR).

Prerequisites

Before you begin, ensure you have the necessary dependencies installed. You'll need Node.js and the Playwright library installed. Additionally, you'll need the Tesseract.js library, which can be installed using the following command:

npm install tesseract.js@2.1.1

Writing Playwright Test Code

Let's assume you have a Playwright test project set up, and you want to extract text from an image within a specific test case. Here's an example of how you can achieve this:

Implementing the Tesseract Code

You've created a separate function to handle the Tesseract OCR process. Here's the implementation for the convertToText function:

This function uses the Tesseract.js library to recognize text from the image and logs the extracted text to the console.

Element screenshot:

Output:

Conclusion

By integrating Tesseract.js with your Playwright TypeScript project, you can easily extract text from images and use it in your test automation scenarios. This capability can be particularly useful when dealing with dynamically generated content in your web application. Remember to handle potential errors during the OCR process to ensure the stability of your test suite.

With these steps, you're well-equipped to extract text from images within your Playwright TypeScript project using Tesseract.js. Happy testing!

Executing Playwright Tests in Multiple Environments

samsuthen akbarali — Thu, 10 Aug 2023 12:41:27 +0000

Automated testing is a crucial aspect of ensuring the reliability and functionality of your web applications across different environments. Playwright, a powerful automation framework, allows you to execute tests seamlessly in multiple environments. In this blog post, we'll explore the reasons behind testing in multiple environments and provide a step-by-step guide to set up Playwright tests for various scenarios.

Why Execute Tests in Multiple Environments?

1. Environment Variability: Web applications are accessed from different environments such as development, testing, staging, and production. Each environment might have unique configurations, settings, and data, which can impact the behavior of your application.

2. Bug Detection: By testing in various environments, you can uncover issues that might not arise in a single environment. This helps you identify bugs early and ensure consistent performance across the board.

3. Configuration Validation: Executing tests in different environments validates whether your application's configuration settings are correctly applied and functional.

Installation and Setup

Before we dive into executing tests in multiple environments, make sure you have the necessary dependencies installed:

Install the dotenv package to manage environment variables:

npm install dotenv

Install cross-env for managing environment variables across different platforms:

npm install cross-env

Creating Environment Profiles

Create environment profile files (e.g., .env.dev, .env.test, .env.uat) for each environment.

Define unique keys for configuration settings in each environment file.

Create unique keys for separate env.ts file

Global Setup

To dynamically load environment variables before test execution, create a globalSetup.ts file:

Configuring Playwright

In your Playwright configuration file, specify the path to the globalSetup.ts file:

Execution Commands

In your package.json, add execution commands for each environment:

Executing the Playwright Tests

To run tests in a specific environment, use the corresponding npm script:

For testing in the test environment: npm run env:test
For testing in the uat environment: npm run env:uat
For testing in the dev environment: npm run env:dev

Conclusion

Executing Playwright tests in multiple environments is a fundamental practice for ensuring your web applications' functionality and reliability across various scenarios. By following these steps, you'll be equipped to seamlessly test your applications in different environments, catch bugs early, and maintain consistent performance.

Exploring Playwright TypeScript Visual Comparison Testing

samsuthen akbarali — Thu, 10 Aug 2023 05:27:41 +0000

In the world of software automation testing, ensuring the visual consistency of web applications is paramount. Imagine a scenario where a tiny code change inadvertently leads to a visual glitch in your application's UI. To prevent such mishaps, visual comparison testing comes to the rescue. In this blog post, we'll dive into the realm of Playwright and TypeScript for effective visual comparison testing.

Unveiling Visual Comparison Possibilities

Visual comparison testing with Playwright and TypeScript opens up a realm of possibilities. You can conduct visual comparisons at different levels to capture and analyze potential visual discrepancies:

Page Comparison:

By capturing screenshots of entire web pages, you can easily identify any unexpected visual changes caused by code alterations. Consider the following code snippet that encapsulates this approach:

test("Page compare", async ({ page }) => {
  await expect(page).toHaveScreenshot(['Login', 'starter.png']);
});

The default screenshot name is autogenerated. However, if you want more control, you can optimize the toHaveScreenshot or toMatchSnapshot function by passing an array parameter. Here, 'Login' refers to a folder name created under a specific test.

Text or Image Comparison:

Dive deeper into the UI by comparing specific text content or images within elements. The following code demonstrates how you can achieve this:

test('Text content compare', async ({ page }) => {
  expect(await page.textContent('p[class="intro-subtitle"]')).toMatchSnapshot(['Login','hero.txt'])
});

Element Comparison:

Sometimes, focusing on specific UI elements is crucial. Here's how you can compare elements like a pro:

test('Element compare', async ({ page }) => {
  expect(await page.locator('div[class="starter-logo-box"]').screenshot()).toMatchSnapshot(['Login', 'ncsclogo.png']);
});

Taming Pixel Differences

To account for minor visual discrepancies due to various factors, you can configure pixel differences in Playwright's config file or at the test level:

In the Playwright config file:

expect: {
  toHaveScreenshot: { maxDiffPixels: 500 },
  toMatchSnapshot: { maxDiffPixels: 500 },
}

At the test level:

await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });

Challenges and CI Integration

However, there's a challenge that emerges when executing tests across different platforms and Continuous Integration (CI) environments. Snapshot naming conventions can vary, leading to inconsistencies. For instance, while running tests locally, a snapshot name might look like example-test-1-chromium-darwin.png. But if you pass a snapshot name as "Image," on a Windows machine, it could become Image-win32.png.

When executing tests through CI on a Linux environment, the discrepancy in snapshot naming can lead to failures. This is where Docker comes to the rescue. By containerizing your code and ensuring consistent naming conventions, you can avoid this issue altogether.

However, if you're determined to run tests locally without Docker, a nifty workaround exists:

By creating a fixture that removes the snapshot suffix, you can achieve uniform snapshot names across all platforms. Here's how you can implement it:

_autoSuffix: [
  async ({}, use, testInfo) => {
    testInfo.snapshotSuffix = `${testInfo.title}`;
    await use();
  },
  { auto: true },
],

This fixture modifies the snapshot suffix based on the test title, ensuring uniformity in snapshot names.

Conclusion

Visual comparison testing with Playwright and TypeScript is a powerful approach to maintain the visual integrity of your web applications. Armed with the ability to compare entire pages, specific elements, and text or images, you can catch visual discrepancies with precision. By configuring pixel differences and tackling challenges like snapshot naming, you pave the way for more reliable and robust automated testing practices.

How to Download Files Using Playwright in Typescript

samsuthen akbarali — Tue, 08 Aug 2023 07:43:09 +0000

Are you struggling with downloading files using Playwright in your Typescript projects? In this guide, I will walk you through a step-by-step solution to tackle this issue.

Specifically, we’ll focus on scenarios where there is a download button in the browser, and upon clicking it, a new tab opens to start the download. After the download is completed, the new tab closes automatically.

The Download Button

The first step is to create a function that clicks the download button and waits for the new tab to open. I will use Playwright waitForEvent method to handle this:

async function clickDownloadButton(){
    const [newTab] = await Promise.all([
        this.page.waitForEvent("popup"),
        this.waitAndClick(this.elements.button_downloadButton)
    ]);
    return newTab;
}

In the above function, we utilize waitForEvent("popup") to wait for the new tab to open. Once the download button is clicked, we capture the new tab object in the newTab variable and return it.

Handling the Download Event

Next, we need to handle the download event in the newly opened tab. The following code snippet does just that:

const newTab = await dashboard.clickDownloadButton();
const [download] = await Promise.all([
    newTab.waitForEvent("download")
]);
const path = download.suggestedFilename();
await download.saveAs(path);

Here, we call the clickDownloadButton() function and get the new tab object in the newTab variable. Then, we use waitForEvent("download") to wait for the download to complete. Once the download event is triggered, we obtain the suggested filename using download.suggestedFilename(). Finally, we save the downloaded file using download.saveAs(path)

Summary

With the provided code snippets, you should now be able to download files successfully using Playwright in your Typescript projects. This approach ensures you handle the download process effectively, even when dealing with new tabs and asynchronous events.

Feel free to try this solution in your projects and let me know how it works for you. Happy coding!