[PYTHON] I made a github action that notifies Slack of the visual regression test

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.

Introduction

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.

What kind of action

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.

Example

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)

スクリーンショット 2020-12-25 12.12.14.png

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.

Task

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.

Summary

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

I made a github action that notifies Slack of the visual regression test
I made a slack bot that notifies me of the temperature
I tried a visual regression test on GitHub Pages
I made a calendar that automatically updates the distribution schedule of Vtuber
I made a SlackBot that notifies me of AtCoder contest information every week
I made a Linebot that notifies me of nearby evacuation sites on AWS
I created a Slack bot that confirms and notifies AWS Lambda of the expiration date of an SSL certificate
I made a twitter app that decodes the characters of Pricone with heroku (failure)
A program that notifies slack of the operating status of fully automatic botanical photography equipment
I made a calendar that automatically updates the distribution schedule of Vtuber (Google Calendar edition)
I made a function to check the model of DCGAN
I made a dot picture of the image of Irasutoya. (part1)
I made a dot picture of the image of Irasutoya. (part2)
[Atcoder] [C ++] I made a test automation tool that can be used during the contest
Tested pipenv with GitHub Actions
I tried a visual regression test on GitHub Pages
I made a program that automatically calculates the zodiac with tkinter
[Kaggle] I made a collection of questions using the Titanic tutorial
I made a Line bot that guesses the gender and age of a person from an image
(Python) I made an app from Trello that periodically notifies slack of tasks that are about to expire.
I made a library konoha that switches the tokenizer to a nice feeling
I made a program to check the size of a file in Python
I made a mistake in fetching the hierarchy with MultiIndex of pandas
I tried to verify the result of A / B test by chi-square test
I wrote a Slack bot that notifies delay information with AWS Lambda
I made a function to see the movement of a two-dimensional array (Python)
[Python] I made a web scraping code that automatically acquires the news title and URL of Nikkei Inc.
I made a tool to estimate the execution time of cron (+ PyPI debut)
I made a LINE BOT that returns a terrorist image using the Flickr API
The story of IPv6 address that I want to keep at a minimum
I made an appdo command to execute a command in the context of the app
[Discode Bot] I created a bot that tells me the race value of Pokemon
I made a tool to automatically back up the metadata of the Salesforce organization
I made a script to record the active window using win32gui of Python
I want a Slack bot that calculates and tells me the salary of a part-time job from the schedule of Google Calendar!
I made a list site of Kindle Prime Reading using Scrapy and GitHub Actions
The story of Linux that I want to teach myself half a year ago
How to test the current time with Go (I made a very thin library)
Add a function to tell the weather of today to slack bot (made by python)
A story that reduces the effort of operation / maintenance
[Python] A program that counts the number of valleys
I made a twitter app that identifies and saves the image of a specific character on the twitter timeline by pytorch transfer learning
I made a threshold change box of Pepper's Dialog
I made a VM that runs OpenCV for Python
A python implementation of the Bayesian linear regression class
# Function that returns the character code of a string
I made a program in Python that changes the 1-minute data of FX to an arbitrary time frame (1 hour frame, etc.)
LINE Bot that notifies you of the stocks of interest
Generate that shape of the bottom of a PET bottle
A memo that I touched the Datastore with python
I made a command to markdown the table clipboard
A story that analyzed the delivery of Nico Nama.
[Python] A program that compares the positions of kangaroos.
I made a tool to get the answer links of OpenAI Gym all at once
I built an application with Lambda that notifies LINE of "likes" using the Qiita API
I made an API with Docker that returns the predicted value of the machine learning model
I made a function to crop the image of python openCV, so please use it.
[Python] I wrote a test of "Streamlit" that makes it easy to create visualization applications.
〇✕ I made a game
A story that stumbled when I made a chatbot with Transformer
A tool that automatically turns the gacha of a social game
I made a LINE BOT that returns parrots with Go