Hello, my name is @glassmonkey.
This article is the last day of GitHub Actions Advent Calendar 2020.
How was your Christmas? I forgot to make the action of the story of this article and made it in the night pan.
Since I mainly use it for my own personal development, I would like to add little by little to the parts that are lacking in various functions.
This time I made a Github Action to do a visual regression test.
It is listed in Marketplace, so please have a look if you are interested.
The source code is also placed in glass monkey/image-regression-notification.
I wrote about the implementation details in the past [I did a visual regression test on GitHub Pages] Please see (https://qiita.com/glassmonkey/items/8002695c375284476a37) for details if you feel like it.
Give two URLs, BASE_URL and COMPARE_URL, as shown below, and take a screenshot of them. Action to post the difference image to Slack.
- uses: glassmonkey/[email protected]
with:
BASE_URL: https://example.com
COMPARE_URL: https://test.example.com
SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
SLACK_CHANNEL: ${{ secrets.SLACK_CHANNEL }}
ENABLE_SHOW_DIFF: false
For SLACK_TOKEN
, specify the token of Slack's bot.
Please note that you need to do files.upload and create a bot that can do that.
In the experiment, compare the changes in https://ore-timer.xyz/
and https://stage-ore-timer.netlify.app/
which shows the change difference. (The page is my personally developed LP)
I changed the h1 text from visualize work concentration
to visualize work concentration
.
You can see that the changed part is surrounded by a red rectangle.
With this kind of feeling, you can easily check the effect of display changes on slack.
At the time of PR, you can also use it for difference detection corresponding to PR by specifying the page hosted locally in the CI environment with docker-compose etc. as COMPARE_URL
.
I wanted to challenge Github Container Resistory, I gave up because of time. This is expected to significantly reduce the execution time of actions.
I'm planning to change this as I'm trying to make the size of the screenshot flexible.
I added an action to notify slack of image regression. For the time being, I feel like I'll try various things for personal use, so I'd be happy if you could give me feedback.
Recommended Posts