In this post we are going to cover a top that is highly important to take your cypress project to the next level.
I will be going to show you how to run cypress in a Jenkins pipeline via Docker container.

Docker installed & configured on your local machine

:
We will need to create some volumes for Jenkins Docker container

 command to pull down the Jenkins Docker image and serving the Jenkins App on 

If it's your first time running Jenkins, It will prompt you with Unlock Jenkins Page where you will need to enter an admin password. To retrieve this we can find it in the logs. It looks like this: 

You'll be requested to establish a user and log in for future sessions when you go passed the 'Unlock Jenkins' screen. Continue by creating your selected user.

The 'Customize Jenkins' page will appear after that. Continue by selecting 'Install Suggested Plugins'.

These are examples, you will need to modify them for your own project 

Docker file is optional as we can pull down the cypress docker image from Jenkinfile directly 

In this post I'm going to show you how to run Cypress in a Jenkins pipeline (via Docker)....

Integrate Docker  & Jenkins in to Cypress

The Amazon Elastic Container Registry (ECR) has been a popular option for many developers and DevOps teams when it comes to creating and deploying Docker images. However, GitHub Container Registry (GHCR) is a great choice if you're seeking an alternative to ECR. GHCR enables you to manage and store your Docker images right inside GitHub repositories. In this blog post, we'll look at utilising GitHub Actions to create and upload Docker images to GHCR.

Your current GitHub operations are seamlessly integrated with GitHub Container Registry. It makes use of GitHub Actions' strength to let you automate the creation, testing, and distribution of your Docker images. You may manage and interact with your team more easily by using GHCR to maintain your source code and Docker images in one location.

Before we dive into the steps, make sure you have the following:

A Project with Dockerfile in the root level

To get started, navigate to the root directory of your GitHub repository and create a new directory called 

. Inside this directory, create a new file named 

. This file will contain the configuration for our GitHub Actions workflow.

Every push to the main branch initiates the execution of this workflow. It creates the Docker image, pushes it to GHCR with the supplied image name and tag, and logs in using the GitHub token.

 with the desired name for your Docker image.

 file and commit it to your repository. Push the commit to trigger the workflow.

To monitor the workflow, navigate to the "Actions" tab in your GitHub repository. You should see a workflow named "Build and Push Docker Image" running. Click on it to view the workflow's progress.

When the procedure is finished successfully, select the "Packages" tab in your repository. Your Docker image will be accessible under the GitHub Container Registry area. To view the available tags and further information, click on it.

In this blog post, we looked at utilising GitHub Actions to create and upload Docker images to the GitHub Container Registry. You may streamline your development and deployment procedures and simplify your Docker image administration by using GHCR. You may improve your CI/CD workflows and boost the effectiveness of your software development lifecycle with GitHub Actions' automation features.

So give it a shot and experience the potential of GitHub Container Registry for your hosting needs for Docker images. Happy building!

Note: GitHub Container Registry is an evolving service, and it's recommended to refer to GitHub's official documentation for any recent updates or changes to the service.

If you enjoyed this article, please click the 

 button and share to help others find it!

In this blog post, we explore an alternative to Amazon Elastic Container Registry (ECR) by leveragin...

AWS ECR Alternative - How to Build and Push Docker Images to GitHub Container Registry with GitHub Actions

In this article, we will be talking about docker (build, tag & push) to AWS ECR and how we can use it to speed up automation test runs.

Imagine if you had to build your docker image each time you trigger your automation run, this will take a longer time as the project may include many dependencies which means it may take a long time to install each dependency each time your trigger the run.

We need to make sure we have the latest docker image build before we trigger the test run.

We can use a GitHub action to trigger on push to the master branch, this means that anytime you commit/merge your changes to the master branch we trigger an action.

In this case, we can trigger an action to build the docker image and push it to AWS ECR.

With this technique, when we run the automation test suit, we pull down the 

 image from AWS ECR and run the test without any other actions.
Now for the fun part, let’s go create these scenarios in our project.

Let’s open up a project from which you would like to build a docker image. In this example, I will be using a Cypress with Cucumber that I used for another article.

 at the root of your project, and the syntax should look like this:

In the above syntax, we are using Cypress's base image that has pre-loaded with the browsers and other software we will need to run cypress. We then create a directory inside of the image and copy the package.json file to that new directory so we can perform an 

 We can add commands to be triggered the test when the docker image starts up but I will leave it blank as I have.


We will be using the below code to build our docker image with the tag 

 in your root directory. ( if this command failed, it could be that you haven’t/didn’t install docker to your local machine )

Once the docker is built, we can run it by the below code, We are starting to run the docker image with the command to run the test 

First, you will need to log in to AWS and create a user with programmatic access to use AWS CLI if you don’t have one.

Once the user is created, you will need to configure AWS locally so that we can push the docker image to ECR with the right user. Type the below command in your terminal. If you get an error, you may need to 

We will need to create an ECR Repo to add the docker images

You can verify it by going to AWS -> ECR -> Resposities, you should see your repository name

Retrieve an authentication token and authenticate your Docker client to your registry. Use the AWS CLI: (Privatekey can be found and extracted from the URL if you are inside the repository)

docker tag <source_image_tag> <target_ecr_repo_uri>

 below you can see my real example for this repo.

Verify that the image is uploaded by going to AWS -> ECR -> Resposities -> Repository

Create shell script to trigger in GitHub action

Create a shell script in the root level called 

 and add the below syntax. The below code will build an image with the current revision, cashing from the latest image

The blow code will be triggered on push to the master branch, it will then log in to AWS with the provided Secrrits then it will trigger the shell script that contains build, tag & push commands.

Last but not least, please add three secrets to GitHub.
Go to 

Add the below secret with the name and value:

Push the changes to GitHub and you should see the GitHub action get triggered on the Action section within your repository. Once it's finished you should also see your latest image on AWS ECR

If you enjoyed this article, please click the 👍 button and share to help others find it!

In this article, we will be talking about docker (build, tag & push) to AWS ECR and how we can use i...

How to Build and push Docker images to AWS ECR with GitHub action

If you want to integrate Jira into your automation framework, you’re in the right place. This post will demonstrate how to integrate Jira into Playwright. This is just one scenario that we will be covering which is when a test run has failed, raise a Jira issue for each of the failed tests but there are many other scenarios that can be covered.
Note -  this concept can be used in another automation framework not only Playwright.

 - you may need permission to access this section of Jira

 any issue in the project that has a bug type and the status not in Declined, Done, or Deployed, and the summary name extracted from the webhook payload

 to only create a New Bug ticket if the look-up result is 

, this way you don’t have duplicate issues in your Jira.

Create a Script to call the webhook in your automation framework, In this example, I will be using Playwright.

In Playwright when a test run has been completed, there is an Option to output the results in JSON format.
With this, we can create a function to loop through the JSON file and retrieve any failed scenarios. We then create a new array and push the data into it so we can be used later on

In this function, we will be calling the webhook via Axios but you can choose any other request liberty. We then use the information from 

Once you have constructed the script, you call this script once the test run has been completed. If you are using Playwright, you will need to configure it to 

See below for how to populate your Jira issue with the Payload you send from your automation framework. 

This post will demonstrate how you can integrate Jira into your automation framework to raise a bug ticket when a test failed in your test run. In this example, we will be using Playwright.

Creating a Jira issue when a test run fails using Playwright

We will be discussing a topic that has been talked about when it comes to E2E testing. It's vital to cover complete E2E testing, even if the user receives an email confirmation.

In this example, we will be looking at the forgot password feature on tes.com.
We will automate a test case to verify that the user receives an email to reset their password. We will be checking elements such as the From, Subject, and Body of the email.

The good news is that MailSlurp is a free API that lets you create real, randomized email addresses on demand. It also lets you send and receive email programmatically

Create an Inbox to get an email & Inbox ID (save it for later)

This will generate the cypress folder where we can create a spec file



 to 30 seconds, allowing our tests enough time to wait for emails to arrive. We will also modify the Cypress browser's viewport dimensions.

: Create a Spec file
Next, create a test spec in with the following folder structure:

let's write our first test in the above directory:

 with your mailslurp inbox id and email address 

We will be discussing a topic that has been talked about when it comes to E2E testing.  It's vital to cover complete E2E testing, even if the user receives an email confirmation.

Test emails with Cypress.io 

Cucumber is a tool that supports behavior-driven development (BDD). It runs automated acceptance tests written in BDD format. Cucumber provides a way to write tests that anybody can understand, regardless of their technical knowledge. It explains test steps and application behavior in simple English using the Gherkin language. 

Cucumber is an important testing tool for the following reasons:

No longer need to write test scripts in multiple languages such as javascript, Python, Java, etc.

It can be integrated with many Automation tools such as Cypress, Selenium, Ruby on Rails, and other web-based testing tools.

Run the following command to install Cypress locally:

Run the following command to install the Cucumber for Cypress package:

 Add the configuration Cypress environment files

In the spec files extension parameter in the 

 file, make sure to point to the feature files:

Let’s first write this test by just using Cypress:

), enters the username and the password and clicks the “

In Cypress, users can group multiple commands into a single custom command by creating a file called 

Now, use the custom command in the tests:

The above code is written using Cypress. Now, on using Gherkin for Cucumber, the code goes as follows:

I login’, ‘the url is {word}’, and ‘I’m logged in

. So create 3 step definitions. Create a Javascript file inside a directory named as the feature file (

Once this code runs, Cucumber will convert it into Cypress commands. And, that’s how it works.

Till now, we have written all the Cypress test scripts directly in the JavaScript files, but with the integration of Cucumber, the test structure will change, and now the entry points will be the Cucumber feature files.

How to set up Cucumber with Cypress?

This list includes automation test sites that provide some unique features that other sites do not have. As a result, you can combine everything to get a complete profile of different types of automation skills.

: You can practice various streams for online shopping on this fake e-commerce site. If you're working on a project where you need to practice various stream types, this is the site you need. You can practice

: This DemoQA contains many of the typical features found on most websites, and it is designed well to practice test automation, so that you can see how to approach each of the different things you may find, like a list that is ordered with drag and drop, user inputs of different types, and so on

: A collection of free APIs for use by developers & QA's. This includes APIs for using data, creating applications, and more.

: This repository contains our Sauce Labs sample app. You can use it locally or in our Real Device Cloud as a sample app for test automation.

: This is a fantastic website to practice for the FinTech industries. This Angular Banking Site is a simple banking website written in Angular. There are transactions listed, as well as login behaviors. Transactions list, deposits, and withdrawals are also shown.

Testing sites are always a must, even for courses, workshops, webinars, testing new tools, and more. In this post, I want to show you a list of sites where we try to test new tools for testing Abstracta software. We'll keep this list updated as we see more websites, so stay tuned!

Websites to Practice Automation Testing (UI, Mobile & API)

Notification is one of the key aspects of a pipeline. You don't want to keep looking at Jenkins screen to know the status. Rather you want to continue doing the next work and get an upate when the pipeline is completed.

In this article, we will learn how to use Jenkins Pipeline plugin to notify Microsoft Teams channel about pipeline status.


 
From your Jenkins dashboard navigate to 

 tab. Locate this plugin by searching for "Office-365-Connector".

jenkins-plugin-cli --plugins Office-365-Connector:4.17.0

2. Configure MS Teams Channel to send Jenkins Notification

Create a Team channel for your notification to appear in 

Now, go to that channel, and from the top-right corner, click on 3 dot arrows and select 

Create a Name for the connection and click "

You can configure it in two ways; Options or in a Stage 



 at the top, where you will be notified about failure and success results at the end of the pipeline

Create a secret as a text in Jenkins and called it `webhook` and add the Webhook URL that you got from 

This will notify channel for listed statuses

 – Notify if the current build has failed

 – Notify if 2 or more consecutive builds have failed

 – Notify if the current build is successful

 – Notify if, after failed builds, the current build got successful

notifyAborted – Notify if the build is aborted by the user

 you will be notified when this stage is 

In this article, we will learn how to use Jenkins Pipeline plugin to notify Microsoft Teams channel about pipeline status.

How to send notification to Microsoft teams from Jenkins

The NVM (Node Version Manager) is a shell script that is used to install and manage Node.js on a Linux-based system. Homebrew is used to install NVM on macOS.

This guide will show you how to install NVM on your macOS machine and manage

Install Homebrew (You must have admin privileges)

If your system already has a node installed, uninstall it first. My system already has installed node via Homebrew. So uninstalling it first. Skip if not already installed.

Update the Homebrew package list and install NVM.

Next, create a directory for NVM at home.

Now, configure the required environment variables. Edit the following configuration file in your home directory

Next, load the variable to the current shell environment. From the next login, it will automatically loaded.

That's all. Your macOS system now has the NVM installed. Continue to the following step to install Node.js versions using nvm.

First, let's see what Node versions are available to install. By typing:

Now, you can install any version listed in the above output. You can also use aliases names like 

After installing you can verify what is installed with:

If you have installed multiple versions on your system, you can set any version as the default version at any time. To set node 14.X as the default version, simply use:

Similarly, you can install other versions like Node 12, 15, and 18 versions and switch between them.

We are going to go through NVM - Node Version Manager and how to setup via Homebrew

How To Install NVM on macOS with Homebrew

The first step is to sign up for an API key on the 

 website. Once you created an account, you can generate your API token and start using it in your automation framework.

To use ChatGPT API, you will need to install and import OpenAI package to make requests to the OpenAI API. You can use any programming language of your choice like JavaScript or Python to access their API.

I have chosen to use their Node JS option where we will be creating a node script to call the API and generate Cypress test cases. Once we have generated the script we will then use Cypress to run and test the AI-generated test case.

Within your Project, Create a new file (call it how you like) Im calling it 

 . To use ChatGPT API, you will need to install and import OpenAI package to make requests to the OpenAI API. Run 

Next, you will need to initiate configuration which will take in an argument, here you will add your apiKey

We will then need to initiate the openai that will take in the configuration we create above which will authenticate the user.

Now we can use one of many functions from openai, in this case, we will be using 

 which takes multiple arguments as been below. After playing around I feel these arguments suited the type of response I was looking for.

 , we should see a response in the terminal like this.

Now let's take it to the next level, We can see that we can give the AI instructions and it will give us the response with the code we are looking for.

We can make it more robust by we fill a form that takes in the 

 to generate the script.
So Create a json new file (call it how you like) Im calling it 

To use this, we will need to modify some of the code we created above.
In the below code, we are importing the 

 npm package and the .json file we created. In our API call, we then modify the 

 to take in the data from the .json file and also we are using the 

 function to create a new file with the name provided by the .json file and save it in the 


If you enjoyed this article, please click the 

Vidya

In this article, I will be showing how to Integrate ChatGPT into Cypress and generate test scripts automatically just by filling out a form. It will create a script and save it into the right directory and we are good to run the script.

How to Integrate ChatGPT into your automation framework

As there are many different IDE, I feel like Visual studio code is the right one for me for many reasons but the biggest one of all is the number of extensions available to make coding easy.

Below you can find my most helpful VS code extensions as an Automation engineer in no particular order.


The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorise your annotations into:

Commented out code can also be styled to make it clear the code shouldn't be there

Any other comment styles you'd like can be specified in the settings

Material Icons for all your file extensions. It really makes identifying the files at a quick glance easy and stand out.

Most of the time we create new files that will need to be imported into a parent file, this plugin helps import files much easier by autocompleting filenames.

Fancy screenshots of your code just by selecting it. The screenshot has rounded edges to make it look professional.

Cypress Helper provides shortcuts to navigate between cypress customs. It really comes in handy when debugging through complex code in less time.

If you love working with docker, This plugin is for you. It gives a visual sidebar with details like Containers, Images, Registries, Networks and Volumes. It really comes in handy when you want to know what is happening over your docker environments.

This plugin helps you tell who made the code changes without having to go anywhere. It would even provide you various contributors for a particular file. Simple hover over a line and it tells the code changes made. A lot of amazing git features are bought to your code editor.

This will only apply if you have integrated cucumber to your automation framework, it will simply:

Auto-parsing of feature steps from paths, provided in settings.json

Definitions support for all the steps parts

Document format support, including tables formatting

Multiple programming languages, JS, TS, Ruby, Kotlin etc.

As the name implies, this extension helps you share and collaborate your code among your team in real-time with real-time editing and chat. This helps and boosts teams’ productivity when working on a project.

Prettier is a code formatter compatible with many languages. It beautifies the code block with nice indentations, thus making the code more readable.

Kathy C.

Top 10 Visual Studio Code extensions for Automation Engineers

Top Visual Studio Code extensions for Automation Engineers in 2022

Cypress basic commands are listed below in no particular order  −

Get single or multiple elements by the locator.

Get the first elements of a particular locator.

It clicks an element in Document Object Model (DOM).

It obtains an element having a specific text. The element can have more than the text and still match.

It is used to create an assertion and is an alias of .should ().

It removes the value from textarea or input.

It removes the browser cookies from an existing domain and subdomain.

It iterates through an array having the property length.

It obtains the descendant elements of a particular locator.

Cypress is a fast, easy and reliable testing tool for anything that runs in a browser. It’s becoming more popular choice of a tool than any other. I have collected some of the most common commands I use on a daily bases.

I’m Pirasanth — but call me PJ.

I love to program, write automation scripts, travel, and lift heavy things.

Cypress.io

Webdriver.io

Cucumber.io

K6.io

Appium

Selenium

React JS

Node.js

Puppeteer