Argos visual testing
Argos is a beautiful open-source app for visual testing.
It is easy to install and less expensive than it's competitors.
Visual testing is a scalable way to ensure the visual integrity of your web application and catch any potential visual bugs before they become a problem.
Argos build example
When visual testing is combined with a CI workflow, you get an immediate feedback cycle that highlights visual diffs across browsers and screen resolutions for each pull request.
5 steps installation
Setting up Argos is blazing fast if you're working on a project that already uses Cypress for end-to-end testing and GitHub Actions as CI.
Step 1 - Install the GitHub app
Subscribe to a plan on GitHub Marketplace and follow the installation tunnel to authorize the GitHub app.
Argos is free up to 5K screenshots monthly.
Step 2 - Install Argos' packages
Install Argos CLI and the Argos Cypress plugin in your project.
npm i --save-dev @argos-ci/cli @argos-ci/cypress
Step 3 - Configure Cypress
Add the following code to cypress/support/index.js
to enable the Argos Cypress plugin and use the argosScreenshot
command.
// file: cypress/support/index.js
import "@argos-ci/cypress/support";
Step 4 - Take a screenshot
In your Cypress test files, use the argosScreenshot
command to take a screenshot of the page for visual testing with Argos. For example:
// file: cypress/e2e/homepage.cy.js
describe("Homepage", () => {
it("screenshots the page", () => {
cy.visit("http://localhost:3000");
cy.argosScreenshot("home");
});
});
The argosScreenshot
command increases screenshot stability, but you can use the cypress' native screenshot command instead.
Step 5 - Configure GitHub Actions
Add a command to your GitHub Actions config file to upload the screenshots to Argos.
# file: .github/workflows/ci.yml
name: CI
build:
runs-on: ubuntu-latest
- uses: actions/checkout@v3
# 👉 Insert the steps to execute Cypress tests
# 👇 Insert this command to upload screenshots to Argos
- name: Upload screenshots to argos-ci.com
run: npx @argos-ci/cli cypress/screenshots
Congratulation
That's it! Argos will automatically receive screenshots of your pages when you push a commit to GitHub. In addition, Argos will compare them to previous versions to ensure no unexpected changes.
Review visible changes
You can now review the visual diffs on Argos and avoid regression. In your pull request, click on details link in front of the Argos check to open the build on Argos.
Credit and sources
- Photo by Petri Heiskanen on Unsplash.
- Argos website and docs
- Argos CLI and Argos Cypress plugin
Top comments (0)