DEV Community: Ekanto

Integrate your playwright test suite with BrowserStack

Ekanto — Mon, 28 Oct 2024 15:32:27 +0000

Do you have an existing playwright automation suite? Then you can integrate your suite with BrowserStack with just a few easy steps. I will try to break down the process, keeping it as simple as possible.

Prerequisites

An existing playwright automation suite
NodeJS installed(Version 14 and above)

Integration Steps

Step 1:

We need to set our BrowserStack credentials as your environment variable. We can do this by opening up CMD/terminal/bash from Windows, Linux, and MacOS.

macOS or Linux
export BROWSERSTACK_USERNAME="<your_user_name>"
export BROWSERSTACK_ACCESS_KEY="<your_bs_access_key>"

Windows PowerShell
$env:BROWSERSTACK_USERNAME="<your_user_name>"
$env:BROWSERSTACK_ACCESS_KEY="<your_bs_access_key>"

Windows Cmd
set BROWSERSTACK_USERNAME=<your_user_name>
set BROWSERSTACK_ACCESS_KEY=<your_bs_access_key>`

We can get these credentials by clicking on the profile icon and Account and Profile and My Profile

Step 2: Install NodeJS BrowserStack SDK

Execute the following command to enable BrowserStack SDK for our project

npm i -D browserstack-node-sdk@latest
npx setup --username "<your_user_name>" --key "<your_bs_access_key>"

Step 3:

Create the config file for BrowserStack in your project's root directory by creating the browserstack.yml file. The .yml file can be configured like this -

userName: <your_user_name>
accessKey: <your_bs_access_key>
framework: playwright
platforms:
  - os: Windows
    osVersion: 11
    browserName: chrome
    browserVersion: latest
  - os: OS X
    osVersion: Ventura
    browserName: playwright-webkit
    browserVersion: latest
  - os: Windows
    osVersion: 11
    browserName: playwright-firefox
    browserVersion: latest
browserstackLocal: true
buildName: bstack-demo
buildIdentifier: ${BUILD_NUMBER}
projectName: BrowserStack Sample
testObservability: true
debug: true
consoleLogs: info

Of course, you can configure this .yml according to your preference. But for now, it just should work.

Step 4: Run your suite

Now your suite is ready to run on BrowserStack. Use the following command to execute your test -
npx browserstack-node-sdk <Your existing command for running your test suite>
In general cases, for running playwright project this command should work with BrowserStack -
npx browserstack-node-sdk playwright test
After that, you should be able to see your tests running on BrowserStack. To see the tests, go to Automate and check the results from there.

Hope it helps! Thanks for reading out :)

Integrate playwright with Jenkins and docker

Ekanto — Mon, 07 Oct 2024 17:32:36 +0000

I will try to demonstrate how I integrated my playwright project with Jenkins and dockerized it. Let's jump into that -

First, open your playwright project and add the Dockerfile to the project's root folder like the image below.

Now it's time to update the Dockerfile. You can add this to your Dockerfile

FROM node:18-bookworm



WORKDIR /usr/src/app

COPY package*.json ./


COPY . .

RUN npm install \ 
    && npx playwright install-deps  \
    && npx playwright install chromium \
    && npx playwright install firefox 


# Expose the port the app runs on
EXPOSE 8080

# Define the command to run the app
CMD ["npx", "playwright", "test"]

That's a bare minimum but obviously, you can update this according to your preferences. We are done with Docker config. Now, we will integrate our project with Jenkins.

Before integrating our project to Jenkins, we need to configure Jenkins a bit. To do that, go to Manage Jenkins and click on Plugins. Now from the search bar, install the following plugins-

NodeJS Plugin
CloudBees Docker Build and Publish plugin
Docker plugin

When you are done with the installation, go to the home page and click on New item. From the next window, Click on Freestyle project and choose a name for your project. Then, hit Ok. It should look like this -

Select the option Git from Source Code Management as we will be using Git. And below in the Repository URL, put the link to your GitHub repo or any other source code repository. If your repo is private, use the Credentials option.

Now from Branches to build, mention the branch that you will be building from. In our case, I will be using my main branch so putting that.

Now head to the build step. Click on Add build step and select the option Execute shell. Put the following commands there.

npm install 
npx playwright install 
npx playwright test --headed --project=firefox

This will trigger the build process of your playwright project inside Jenkins. You can modify the commands if you want to.

Now select Add build step ** again and select **Docker build and publish. In the Repository Name, put your docker repo name where you are going to containerize your project.

When you are done, hit Apply and Save. Now your project is ready to be built and deployed on Docker. Once it's ready, you will see your project is now ready to be built. Click on your project name and hit Build Now.

Once it starts building, you can see the status of your current build by clicking here

Once done, you will see your newly built docker image is ready for conteinerization.

Integrate playwright with Jenkins and docker

Ekanto — Mon, 07 Oct 2024 17:32:36 +0000

I will try to demonstrate how I integrated my playwright project with Jenkins and dockerized it. Let's jump into that -

First, open your playwright project and add the Dockerfile to the project's root folder like the image below.

Now it's time to update the Dockerfile. You can add this to your Dockerfile

FROM node:18-bookworm



WORKDIR /usr/src/app

COPY package*.json ./


COPY . .

RUN npm install \ 
    && npx playwright install-deps  \
    && npx playwright install chromium \
    && npx playwright install firefox 


# Expose the port the app runs on
EXPOSE 8080

# Define the command to run the app
CMD ["npx", "playwright", "test"]

That's a bare minimum but obviously, you can update this according to your preferences. We are done with Docker config. Now, we will integrate our project with Jenkins.

Before integrating our project to Jenkins, we need to configure Jenkins a bit. To do that, go to Manage Jenkins and click on Plugins. Now from the search bar, install the following plugins-

NodeJS Plugin
CloudBees Docker Build and Publish plugin
Docker plugin

Now from Branches to build, mention the branch that you will be building from. In our case, I will be using my main branch so putting that.

Now head to the build step. Click on Add build step and select the option Execute shell. Put the following commands there.

npm install 
npx playwright install 
npx playwright test --headed --project=firefox

This will trigger the build process of your playwright project inside Jenkins. You can modify the commands if you want to.

Now select Add build step ** again and select **Docker build and publish. In the Repository Name, put your docker repo name where you are going to containerize your project.

Once it starts building, you can see the status of your current build by clicking here

Once done, you will see your newly built docker image is ready for conteinerization.

Why we need test automation framework and how to develop it?

Ekanto — Sat, 18 Mar 2023 14:19:42 +0000

Test automation is a fundamental process along with testing applications manually. To make this whole automation process easier and performing automation testing in an effective and efficient way, QA engineers use automation frameworks. There are different types of frameworks available that serve different purposes. Some of the popular testing frameworks are:

Cypress - For E2E(End to End) Testing.
Selenium - For Web automation.
RESTAssured - A Java library to test REST API's.
Cucumber - Simple Gherkin used framework for BDD testing.

All the test automation frameworks serves some similar objectives. Those are:

Reusability: Frameworks gives the power to QA engineers to make their test automation process in a more non-redundant way and reuse the automated test cases.

Maintainability: Requirement changes most often. To maintain the test cases with the changing requirements, framework gives QA the additional benefits to make the changes more efficiently. Also, anyone can add more test cases or modify existing test cases if needed.

Readability: Framework makes it easier for QA engineers to read and understand the code more easily.

Test automation framework gives a boost to QA engineers to get their job done in a more convenient way. But there some phases to develop a test automation framework. The key phases are:

Requirement gathering: Before designing a framework, it's important to understand the requirements first. What type resources a QA engineer needs, URL's or API all these things need to be considered first before developing a framework.
Choosing automation tool: Considering the needs and purpose of automation, tools should be chosen accordingly.
Designing the framework: It's one of the crucial phase of developing a framework. A framework with good design model makes handling the automation code in a more non-redundant way, makes it more maintainable and readable. One of the popular automation design model is POM(Page Object Model).
Development and execution: After choosing and designing the framework, the QA engineer needs to implement the files.
CI/CD: After development and execution, the framework can be deployed in CI/CD to maintain the continuous integration of automation codes.

Capture screenshot in Selenium for failing conditions using Java

Ekanto — Sun, 17 Jul 2022 01:25:38 +0000

We testers often do this task frequently, capturing evidence for failing test cases or conditions as screenshots or video. Accomplishing this task manually is a quite hectic process. Here comes automation handy. I am going to write about the process how we can capture screenshots in Selenium using Java. We will try avoiding hard coding and reduce redundancy so that it goes well with POM(Page object model).

First things first, let's create a project called XYZ. It's better if it's a Maven project. Inside of it, we create a package (suppose I name it) com.screenshot and inside of the package, we create a class ScreenShot.java. Inside, we are adding this following code.

File ss = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

This will take the screenshot for us. But if we want to save it somewhere in our project or to view the captured file, we are going to need a utility called commons.io. We can get this file from this link. For Maven project, we just need to edit the pom.xml file and this following code in the dependencies section.




<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
      <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.7</version>
      </dependency>

This should be enough. To save the screenshot that we captured, we just need to add the following code right after we added the earlier. Before that, let's assume we created a directory/folder called screenshot in our class path, so that we can save our captured screenshots there. So in total the code looks like this-



File ss = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        FileUtils.copyFile(ss, new File(".//screenshot//"your_file_name".png"));

If it's done correctly, we shall have a screenshot with .png extension in our screenshot folder. We can keep it using any format we want by modifying the format.

It's done!! But wait, still some left. In most cases, we have more than one failing cases in our project and we need to keep multiple screenshots. But since we have defined the name statically, every time the capture will be replaced by the new one. To work on this, we can name the file dynamically. As an example, we can save the files with dates or time. One way of doing this,



Date dt = new Date();
String st = dt.toString().replace(" ", "-").replace(":", "-");

The Date class will have the time and to convert the date object to string, we can use the toString() method. We can also change the format using the replace() method according to our choice. Lastly, we are going to add the string as the name of the file. It looks like this-



FileUtils.copyFile(ss, new File(".//screenshot//" + st + ".png"));

After this, we shall have a screenshot file in our folder.

Sometimes we may need to change the directory of our screenshots, so it's better to handle the whole process in a separate package/class/method so that we can change it efficiently. It may look like this-



public class ScreenShot {
    public static File screenShot(WebDriver driver) throws IOException {
        Date dt = new Date();
        String st = dt.toString().replace(" ", "-").replace(":", "-");
        File ss = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        FileUtils.copyFile(ss, new File(".//screenshot//" + st + ".png"));
        return ss;
    }

Since it's a static method, we can use this anywhere in our testcases just by using ScreenShot.screenShot(driver);.

That's it!!

Thanks for reading this out. Pardon me for the mistakes I may have made as I am still a learner and exploring everyday. I would be glad if it helps anyone. :)

Adding logs to your selenium script using python

Ekanto — Sun, 29 May 2022 10:45:59 +0000

Ever wondered running your selenium script but also thinking of saving the logs of every execution of your test cases? There is a much convenient way of doing this task in Selenium using Python. This article is all about this.

Main code

First of all, you need to create a python package, let's say it's name log. Inside of the package, create a python file (lets say it's logCapture.py). Then in this file, import a python package called logging. import logging It should be included in the python when you install.

Then you can create a class and define method inside of it. It's better if you declare the method as a static method so that you can access the method from anywhere of your project without creating any objects of it's class. Then you can add the piece of code given below:



import logging

class LogGen:
    @staticmethod
    def loggen():
        logger  = logging.getLogger("Test Login")
        fileHandler  = logging.FileHandler('.\\YourDesiredFolderName')
        formatter = logging.Formatter("%(asctime)s :%(levelname)s : %(name)s :%(message)s")
        fileHandler.setFormatter(formatter)
        logger.addHandler(fileHandler)
        logger.setLevel(logging.INFO)
        return logger

You can pass the name of your test case as a parameter inside the getLogger() method. The filehandler class will handle the your desired location for your logs. Formatter method will make sure your logs are being stored following a proper format. The logger variable will return the log at the end of the execution.

Driver code

Now it's time to use that loggen() function. Create another python file to add the driver code. Inside of this file, import the loggen function by simply using this code from log.logCapture import logGen. The code is basically for accessing the LogGen class which we created earlier. Then use the logging by just calling the logger variable.

Let's say we want to test a login page. So you can add logs by using logger.info("You desired massage") right before the execution of the test case or where ever you want. After executing the test cases, you will see a log file has been created in your desired folder. The log should look something like this

This is the output of my logs after executing the test cases. This is how my code looks like behind this

You should be able to use log if you follow this procedure :)

Thanks for reading. Pardon me for the mistakes I may have made as I am new to automation testing and still exploring everyday. I would be glad if it helps anyone. :)