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

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....

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

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.

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

It obtains a particular browser cookie by its name.

If you feel like there is a command that should be on this list, please leave a comment below!

Cypress is a fast, easy and reliable testing tool for anything that runs in a browser. It’s becoming...

Cypress most common commands

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 

Postman, akin to a Swiss army knife, offers a user-friendly interface and a comprehensive suite of features tailored for API testing. On the other hand, Charles Proxy serves as your vigilant watchdog, enabling deep network traffic analysis and debugging.

In this blog post, we embark on a journey to explore the synergies between Postman and Charles, uncovering their respective strengths, collaborative potential, and how they can elevate your testing prowess to new heights. Join me as we navigate through the realms of API testing, armed with the formidable capabilities of Postman and Charles, empowering you to deliver superior software with confidence and precision.

Charles Proxy and Postman are both popular tools used by developers and testers for API testing and debugging, but they serve slightly different purposes and have different feature sets.

Charles Proxy is primarily a web debugging proxy tool. It allows you to intercept and inspect HTTP and HTTPS traffic between your computer and the internet. With Charles Proxy, you can monitor network traffic, view HTTP requests and responses, set breakpoints to intercept requests, manipulate requests and responses, and simulate slower network connections. It's commonly used for debugging and analysing how web applications work, diagnosing issues with APIs, testing web services, and security testing.

Whereas Postman, on the other hand, is an API development environment. It provides a user-friendly interface for building, testing, and documenting APIs. With Postman, you can create requests using various HTTP methods (GET, POST, PUT, DELETE, etc.), set headers, add request parameters, organise requests into collections, and automate testing with scripts. Postman also offers features for mocking APIs, generating API documentation, collaborating with team members, and running automated tests. While Postman does allow you to view request and response details, it's more focused on API development and testing workflows rather than low-level network debugging like Charles Proxy.

Now let’s take a deeper dive into the pro’s and con’s of each tool.

Charles Proxy provides detailed insights into HTTP and HTTPS traffic between your computer and the internet, allowing you to monitor requests and responses in real-time.

2. We can manipulate the request and responses.


It enables you to intercept requests and responses, modify headers, tweak payloads, and simulate various network conditions, which is extremely useful for debugging and testing purposes.


Charles Proxy allows for SSL proxying, meaning it can decrypt and inspect encrypted HTTPS traffic, giving you full visibility into encrypted communication, which is crucial for debugging secure applications.

4. We can use Charles across different platforms

 (not only for web, but even devices such as phones!)

5. We can throttle and create different bandwidth simulations.


You can simulate different network conditions such as slower connections, dropped connections, or limited bandwidth to test how your application performs under various network scenarios.


 While Charles Proxy offers a free trial, it's ultimately a paid software, which might be a deterrent for some users, especially those who have budget constraints.


 For beginners, Charles Proxy can have a bit of a learning curve, especially when it comes to understanding all its features and how to effectively use them for debugging and testing. But not to worry, I can create an easy step by step guide to get you all set up with Charles!


4. Running Charles Proxy alongside other applications can consume significant system resources, 

especially if you're dealing with a large amount of network traffic or SSL decryption.

While Charles Proxy is excellent for inspecting and manipulating network traffic, it lacks the comprehensive API testing features found in dedicated tools like Postman, such as automated testing, request collections, and scripting capabilities.

Overall, Charles Proxy is a powerful tool for network debugging and analysis, but it may not be suitable for all use cases, particularly those requiring extensive API testing capabilities or those with limited budgets.

Well, firstly Postman provides User-Friendly Interface.

1. Postman provides a clean and intuitive interface,

 making it easy for developers to create, test, and manage API requests without requiring extensive technical knowledge.

2. Us, testers can carry out comprehensive API Testing.


 Postman offers a wide range of features for API testing, including support for various HTTP methods, setting headers and parameters, handling authentication, organising requests into collections, and running automated tests.

3. We can use postman to collaborate together!


 Postman enables team collaboration by allowing users to share collections, workspaces, and environments, facilitating better communication and coordination among team members working on API projects.


Postman provides scripting capabilities using JavaScript, allowing users to automate tests, set up pre-request and post-request scripts, and perform data-driven testing, thereby saving time and improving efficiency.


 Postman allows you to create mock servers, which simulate API responses without needing the actual backend implementation. This is useful for frontend developers to start building applications before the backend is fully developed.


 Postman lets you define environments with variables, making it easy to switch between different environments (e.g., development, staging, production) without modifying individual requests.

However, lets now see the limitations of Postman:


 While Postman allows you to inspect request and response details, it's not as robust as dedicated network debugging tools like Charles Proxy for analysing low-level network traffic.


 While the basic features of Postman are straightforward to use, mastering advanced features such as scripting and automation may require some learning for users who are new to API testing and development. (Not to worry, I will have you covered!)

3. Resource Intensive for Large Collections.


 Working with large collections of requests or running extensive automated tests in Postman can be resource-intensive and may slow down the application.


 Postman's collaboration features rely on external services provided by Postman, which means users are dependent on these services for collaboration functionalities.

5. Limited Support for Non-HTTP Protocols.


Postman primarily focuses on testing HTTP-based APIs and may not offer extensive support for testing APIs based on other protocols.

Overall, Postman is a versatile tool for API development and testing, offering a wide range of features to streamline the API development lifecycle. However, it may not be suitable for advanced network debugging or testing protocols other than HTTP. Whereas Charles Proxy is primarily for inspecting and debugging network traffic, while Postman is focused on API development, testing, and automation. Depending on your needs, you may use one or both tools in your development and testing workflows.

Postman and Charles – the dynamic duo revolutionising API testing and development. 

Charles vs Postman

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 leveraging the capabilities of GitHub Container Registry (GHCR). We provide a step-by-step guide on how to build and push Docker images to GHCR using GitHub Actions. By utilizing GHCR, developers can seamlessly integrate Docker image management into their GitHub workflows, simplifying the CI/CD process.

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

Before we start, let's talk about what cucumber is and why we use it here

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.

Let's add cucumber to cypress and automate a simple login flow

There are a few prerequisites before we can start installing cucumber, you need to have these tools to initiate project setup.

Type the below command on the terminal to install cucumber

The next step is to set the configurations in 

 inside the root directory of your project and specify the location of step definitions as follows

As we are finished with the basic configuration, we are now ready to write up the script. We will be using 

https://opensource-demo.orangehrmlive.com/

 for this purpose and automating the Login test case for demonstration.

 to run cypress. You can directly open cypress Launchpad from here

Now we can run the below command to open cypress UI

 from your feature files inside the Spec Explorer

I hope you found this article helpful. Follow the above steps and run your first test case with cypress and let me know how it went in the comments.

Link to 

As not long ago we were introduced to Cypress v10 with breaking changes. The process of installation of cypress is quite simple and easy but we’ll look at how to install and configure cucumber with it.

How to set up Cucumber in Cypress 10?

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

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!

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

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

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 

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.

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