How Do I Link GitHub Actions with Applitools?

Image for post
Image for post

At Applitools, we have tutorials showing you how to integrate Applitools with commonly-used CICD orchestration engines. You can already link Applitools with Jenkins, Travis, CircleCI. Each of these orchestration engines can automatically launch visual validation with Applitools as part of a build process.

What about GitHub Actions?

What is “GitHub Actions”?

GitHub Actions makes it easier to automate how you build, test, and deploy your projects on any platform, including Linux, macOS, and Windows. This provides Fast CI/CD for any OS, any language, and any cloud!

Applitools provides automated Visual AI testing. It is easy to integrate Applitools with GitHub Actions, letting developers to test their code by running visual tests using GitHub Actions workflow.

For this article, I have chosen a Cypress automation project that has a single visual test with Applitools created before in my GitHub repo:

https://github.com/satishapplitools/Cypress-Applitools-GitActions.git

Configuring GitHub Actions workflow on the repository

Image for post
Image for post

GitHub Actions has an option to choose from several starter workflows based on programming languages, tools, technologies, and deployment options. Workflow prepares a YAML file at the end.

Image for post
Image for post

For this article, I have chosen, “ Skip this and set up a workflow yourself “ to use an existing YAML file.

Image for post
Image for post

If you want to follow along, do the same. I named my file main.yaml. Copy the following code and paste the content into your Yaml file.

For Applitools integration, we require Applitools API Key and pass Git Commit SHA as Applitools Batch ID. In the code example above, I have set up the Applitools API key as GitHub secrets and that can be passed as a call to an environment variable in the GitHub Actions workflow (as shown below). To know more about GitHub Actions secrets click secret hub,

Image for post
Image for post

To create GitHub secret in the repo, do the following: below steps:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

This is already done in the YAML file above. No changes required.

Image for post
Image for post

For more detailed information click creating-and-storing-encrypted-secrets.

In addition to the above, we need to amend “applitools.config.js” to include API key and BatchID as shown below,

Image for post
Image for post

Run Git Hub Actions workflow integrated with Applitools

Image for post
Image for post
Image for post
Image for post

Let us wait for the workflow to complete. Workflow logs can be seen while the step in the workflow is running.

Image for post
Image for post
Image for post
Image for post

Applitools SCM integration shows the results of the visual test and compares the screenshots between the source and destination branches. In case there are visual tests have unresolved status — comparison with baseline has differences.

Image for post
Image for post
Image for post
Image for post

Let’s assume if the user has accepted differences, then we should see the status as “passed” for “test/applitools” step at the pull request/commit screen.

Image for post
Image for post

Click on “scm/applitools” to compare and merge screenshots between source and destination branches.

Image for post
Image for post

To know more about SCM integration feature of Applitools for GitHub and BitBucket Integration see below

Successful build with GitHub Actions integrated with Applitools will be like below with all checks passed,

Image for post
Image for post

Key Benefits of this integration

  • Applitools visual AI — testing the UI with less code and zero flakiness, saves developer time — increases productivity.
  • Increases code quality and confidence to merge or deploy code.

For More Information

Originally published at https://applitools.com on July 27, 2020.

Deliver visually perfect web and mobile apps with AI-powered end-to-end visual testing & monitoring. Get started, free: http://bit.ly/ApplitoolsFree

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store