DEV Community: Gaurav Jani

Playwright's LocatorHandler: Simplifying Web Testing and overlay handling

Gaurav Jani — Wed, 06 Mar 2024 13:13:00 +0000

Ever feel like a whack-a-mole when unexpected elements like cookie consent popups disrupt your Playwright tests? You're not alone. These overlays can block actions and make tests unreliable. But fear not, Playwright's addLocatorHandler comes to the rescue, offering a streamlined solution to handle these interruptions effectively.

What is addLocatorHandler?

Introduced in Playwright version 1.42, addLocatorHandler provides a mechanism to dynamically handle overlays that appear during automated testing. These overlays, like cookie consent dialogs, can block automated actions such as clicking buttons or filling out forms, making tests unreliable and cumbersome to maintain.

How does it work?

The addLocatorHandler method allows you to define a custom function that is triggered whenever a specified element locator is detected on the page. This function, known as a handler, is responsible for removing the overlay or taking any necessary actions to mitigate its impact on the test.

Example Usage:

Let's face a common foe: the cookie consent dialog. We can use addLocatorHandler to automatically dismiss it whenever it appears:

await page.addLocatorHandler(page.getByRole('button', { name: 'Accept all cookies' }), async () => {
  await page.getByRole('button', { name: 'Reject all cookies' }).click();
});

await page.goto('https://example.com');
await page.getByRole('button', { name: 'Start here' }).click();

In this scenario, when the Accept all cookies button appears (our trigger), the handler function clicks the Reject all cookies button instead. This dismisses the dialog and allows your test to proceed as planned.

Benefits of addLocatorHandler:

Improved Test Reliability: By automatically handling overlays, tests become more robust and reliable, reducing the chances of false positives or test failures due to unexpected elements.
Simplified Test Maintenance: With addLocatorHandler, there's no need to manually handle overlays in each test case. The logic to dismiss overlays is centralized, making tests easier to maintain and update.
Enhanced Test Efficiency: By seamlessly handling interruptions, tests can execute more efficiently without unnecessary delays caused by manual intervention or waiting for overlays to disappear.

Learn More:

For more details on using addLocatorHandler, refer to the official Playwright documentation: Here

Conclusion:

In conclusion, addLocatorHandler simplifies handling overlays in Playwright tests, boosting test reliability and efficiency. It empowers testers to focus on core test logic without worrying about unexpected interruptions.

Don’t forget to Follow me on LinkedIn and Github!!

Gaurav J.

Managing Multiple Git/GitHub Accounts with SSH

Gaurav Jani — Wed, 12 Jul 2023 19:30:07 +0000

Managing multiple GitHub Git accounts can be a challenge, especially when it comes to handling authentication and access. However, using SSH keys and configuring your SSH setup can streamline the process and make it more convenient. In this post, we'll explore the steps to handle multiple GitHub Git accounts using SSH.

Step 1: Generate SSH keys for each GitHub account
To begin, generate SSH keys for each GitHub account you want to manage. Open your terminal or command prompt and run the following command, replacing "your_email@example.com" with the email address associated with your GitHub account:

ssh-keygen -t ed25519 -C "your_email@example.com"

Remember to provide a unique name for each SSH key, such as "id_ed25519_account1" or "id_ed25519_account2". You can also set a passphrase for additional security. In above screenshot, I've entered 'gh-bitwisebro' as name for my SSH key file.

Step 2: Add SSH keys to the SSH Agent for Convenient Authentication
To avoid entering the SSH key passphrase every time you authenticate with your GitHub accounts, we can leverage the SSH Agent. The SSH Agent is a program that securely holds your SSH keys, allowing for seamless authentication during your Git operations.

Open command prompt in the .ssh folder add the SSH keys to agent using: ssh-add id_ed25519_account1

Remember to replace id_ed25519_account1 with your filename! My filename is gh-bitwisebro so I'll execute following command:

ssh-add gh-bitwisebro

Note: Some of you might face errors like ssh-add error connecting to agent while adding SSH keys to SSH Agent. In that case follow following steps:

Makesure you've openSSH Client and openSSH Server installed. (You can do it from optional features menu in windows)
Make sure your openSSH Authentication Agent is running. (In windows, you can do it from Services)

Step 3: Add SSH keys to your GitHub accounts

navigate to .ssh folder: cd C:\Users\Gaurav Jani/.ssh/gh-bitwisebro
Open this folder in VS Code: code .
Now copy the key from public file i.e. file that has .pub extension

Log in to your GitHub account for the first account and navigate to "Settings". In the left sidebar, click on "SSH and GPG keys". Add a new SSH key by providing a descriptive title and pasting the contents of the corresponding .pub file generated in Step 1. Repeat this step for each GitHub account you want to associate with an SSH key.

Step 4: Create or modify your SSH configuration
Next, create or modify your SSH configuration file. Open it in your preferred text editor. We've already opened that folder in VS Code.

Create a file called config in the folder, i.e. .ssh folder

Add the following lines for each GitHub account, replacing the placeholders with your own values:

# Account 1
Host github-account1
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_account1

# Account 2
Host github-account2
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_account2

In my Case, I'll add something like this:

Save and close the file.

Step 5: Test the SSH connections
To ensure that your SSH connections are properly configured, open your terminal and run the following command for each GitHub account:

ssh -T git@github-account1

ssh -T git@github-account2

If everything is set up correctly, you should see a message like: "Hi username! You've successfully authenticated...".

Step 6: Configure your Git repositories
Lastly, configure your Git repositories to use the appropriate SSH URLs. For existing repositories, update their remote URL using the command:

git remote set-url origin git@github-account1:username/repository.git

For new repositories, when cloning, use the SSH URL with the configured hostname:

git clone git@github-account2:username/new-repository.git

So I'll clone the above repo using:
git clone git@gh-bitwisebro:bitwisebro/Learn-Git.git

Refer the image:

Conclusion:
By following these steps, you can easily manage multiple GitHub Git accounts using SSH. This approach allows you to switch between accounts seamlessly and ensures secure authentication. With separate SSH keys and host aliases, you can streamline your Git workflows and maintain a clear separation between your different GitHub accounts.

If you found this guide helpful and want to stay connected, I invite you to connect with me on:

LinkedIn: https://www.linkedin.com/in/bitwisebro/
GitHub: https://github.com/bitwisebro

Feel free to reach out, ask questions, or explore more of my work on these platforms. Let's connect and continue the conversation!

Thank you for reading and happy coding!

How to Record Selenium Test Execution Video with TestNG & Java?

Gaurav Jani — Fri, 16 Jun 2023 06:31:10 +0000

If you are working on a Selenium test automation project, it is essential to have a record of your test execution to review and analyze the results. Recording a video of your Selenium test execution can help you identify any issues or errors that occur during the test run. In this article, we will discuss how to record Selenium test execution video with Java.

I personally prefer monte screen recorder library! It works pretty well and thats what we are gonna learn today! Let’s start!

Step 1: Add monte-screen-recorder dependency in your project

If you are using maven, You can add following dependency to your project’s pom.xml file. This will download the required packages for screen recording and you can use them in your Selenium test automation project.

 <dependency>
    <groupId>org.monte.media</groupId>
    <artifactId>monte-screen-recorder</artifactId>
    <version>0.7.7.1</version>
    </dependency>

Step 2: Import Required Packages

To start with, we need to import the required packages for screen recording. Here are the packages that we need in the Java Class:

 import org.monte.media.math.Rational;
    import org.monte.screenrecorder.ScreenRecorder;
    import org.monte.media.Format;
    import org.monte.media.FormatKeys.MediaType;
    import org.monte.media.VideoFormatKeys;
    import org.monte.media.math.Rational;

Step 3: Create a Method to Start the Screen Recording

In this step, we will create a method that will start the screen recording. Here is the code for this method:

 public static ScreenRecorder startRecording(String fileName) throws Exception {
    GraphicsConfiguration gc = GraphicsEnvironment
    .getLocalGraphicsEnvironment()
    .getDefaultScreenDevice()
    .getDefaultConfiguration();

    ScreenRecorder screenRecorder = new ScreenRecorder(gc,
    new Format(MediaTypeKey, MediaType.FILE, MimeTypeKey, MIME_AVI),
    new Format(MediaTypeKey, MediaType.VIDEO, EncodingKey, ENCODING_AVI_TECHSMITH_SCREEN_CAPTURE,
    CompressorNameKey, ENCODING_AVI_TECHSMITH_SCREEN_CAPTURE, DepthKey, (int) 24, FrameRateKey,
    Rational.valueOf(15), QualityKey, 1.0f, KeyFrameIntervalKey, (int) (15 * 60)),
    new Format(MediaTypeKey, MediaType.VIDEO, EncodingKey, “black”, FrameRateKey, Rational.valueOf(30)),
    null, new File(fileName));

    screenRecorder.start();

    return screenRecorder;
    }

In this method, we are creating a new instance of the ScreenRecorder class and setting up the required configurations for screen recording.

Step 4: Create a Method to Stop the Screen Recording

In this step, we will create a method that will stop the screen recording. Here is the code for this method:

public static void stopRecording(ScreenRecorder screenRecorder) throws Exception {
    screenRecorder.stop();
    }

In this method, we are simply calling the stop() method of the ScreenRecorder class to stop the screen recording.
Step 5: Start and Stop Screen Recording in Selenium Test

In this step, we will start and stop the screen recording in our Selenium test. Here is the code for this:

 @Test
    public void testRecording() throws Exception {
    // Start screen recording
    ScreenRecorder screenRecorder = startRecording(“testRecording.avi”);

    // Your Selenium test code goes here

    // Stop screen recording
    stopRecording(screenRecorder);
    }

In this code, we are starting the screen recording before our Selenium test code and stopping it after the test execution is completed.

Conclusion: In this article, we have discussed how to record Selenium test execution video with Java. By following the above steps, you can easily record a video of your Selenium test execution and analyze the results. This can help you identify any issues or errors that occur during the test run and improve the overall quality of your test automation project.

Don’t forget to Follow me on LinkedIn and Github!!