GitHub Actions and Argos CI | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will run the PwPracticeApp application on the GitHub CI pipeline using GitHub Actions and perform visual testing with Argos CI . Prerequisites Upload your PwPracticeApp project to your own GitHub repository. Use the command git remote set-url origin [repository URL] to set up your remote repository. Configuring GitHub Actions To configure your project for GitHub Actions: Create a folder .github/workflows in the root of your project. Create a file named playwright.yaml inside this folder. Paste the recommended configuration from the Playwright documentation. Modify the configuration to use Node 20 and set up the test commands. Push your changes to the master branch, and GitHub will automatically run your tests. Integrating Argos CI Argos CI is a tool for visual testing that integrates seamlessly with GitHub. To set it up: Create an Argos CI account using your GitHub account. Install the necessary package in your Playwright configuration. Adjust the playwright.config.ts to include the Argos CI reporter. Running Visual Tests After making UI changes, create a pull request to trigger the visual tests. Argos CI will compare new screenshots with the baseline and notify you of any changes. You can approve or reject these changes based on the visual differences detected. This integration ensures that visual changes are monitored, enhancing the quality of your application. For more details, refer to the provided documentation links.