J'ai essayé un test de régression visuelle sur les pages GitHub
motivation
Bonjour @glassmonkey. En parlant de Github Action, CI. Je voulais faire quelque chose en utilisant des images si je voulais faire de l'IC, alors j'ai essayé un simple test de régression visuelle. Je l'ai fait à la hâte, alors j'apprécierais vos opinions et vos impressions.
Qu'est-ce qu'un test de régression visuelle?
L'explication sur le blog de Astamuse était facile à comprendre, je vais donc la citer.
Le test de régression visuelle est un test de régression visuelle, en particulier un test qui prend une capture d'écran et extrait la différence.
En d'autres termes, faire un test de régression visuelle dans l'environnement de Github Action L'image suivante sera générée dans l'environnement virtuel.
- Captures d'écran avant et après le changement
- Image de différence avant et après le changement
Dans cet article
- L'exploration et les captures d'écran sont Selenium + Headless Chrome
- OpenCV pour la génération d'image différentielle (traitement d'image) A été traité.
Comment as-tu fais
échantillon
Ceux que j'ai réellement réalisés sont les suivants. https://github.com/glassmonkey/vue-sample/pull/3 Je l'ai ajouté à l'application que j'ai créée pour étudier Vuejs.
Cette fois, je l'ai entouré d'un rectangle afin que les changements soient faciles à comprendre, comme indiqué ci-dessous.
| L'image originale | Image après modification | Image de différence |
|---|---|---|
| <img width="600px"# alt="L'image originale" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/136950cf-4133-b4c5-badb-6ed751650df1.png "> |  |
 |
Exigences
- Environnement de production avant modification (supposé déployer sur les pages github)
- Pour le déploiement, j'ai utilisé le [déploiement automatique sur les pages GitHub par actions GitHub] de @ peaceiris (https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d).
- Après le changement, le contenu de PR (commencez par docker-compose dans l'environnement virtuel sur CI)
https://github.com/glassmonkey/vue-sample/blob/master/.github/workflows/test.yml#L19-L20
BASE_URL: https://glassmonkey.github.io/vue-sample
DIFF_URL: http://localhost:8080
Tester le contenu
Flux d'essai
Le yml pour les tests est le suivant. https://github.com/glassmonkey/vue-sample/blob/master/.github/workflows/test.yml
name: test
on: pull_request
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1 # ①
- name: develop run # ②
run: |
docker-compose up -d
- name: run test # ③
run: |
cd tests && \
docker-compose build && \
docker-compose run app \
env:
WINDOW_SIZE: 1024,768
BASE_URL: https://glassmonkey.github.io/vue-sample/
DIFF_URL: http://localhost:8080
- uses: jakejarvis/s3-sync-action@master # ④
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: 'ap-northeast-1'
SOURCE_DIR: './tests/dist'
DEST_DIR: ${{github.repository}}/${{github.sha}}
- name: post maessage # ⑤
run: |
cd tests && bash post.sh
env:
S3_PATH: https://${{ secrets.AWS_S3_BUCKET }}.s3-ap-northeast-1.amazonaws.com/${{github.repository}}/${{github.sha}}
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Les informations d'identification doivent être définies comme suit à partir de settings> secrets sur Github.
Pour expliquer brièvement
- Initialisation
- Construisez un environnement virtuel avec le contenu de PR
- Créer et exécuter un conteneur pour les tests de régression visuelle
- Téléchargez l'image générée vers s3
- Publiez l'image sur PR
Cela devient le flux de. J'expliquerai le contenu de l'article en 3 génération d'images et 5 PR.
Génération d'images
La prise de vues de scoon et la génération d'images différentielles sont effectuées ci-dessous. https://github.com/glassmonkey/vue-sample/blob/master/tests/src/main.py
Étant donné que le conteneur à exécuter pour le test cette fois-ci est indépendant de l'application construite localement, le nom de localhost ne peut pas être résolu, je l'ai donc réécrit de force du côté test ci-dessous.
if "localhost" in url:
host_addr = subprocess.run(["ip route | awk 'NR==1 {print $3}'"], stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True).stdout.decode("utf8").rstrip('\n')
url = url.replace("localhost", host_addr)
À propos des captures d'écran
J'ai fait référence à l'article Exécuter Selenium, Headless Chrome et Python 3 sur Docker. Il convient de noter que les éléments optionnels suivants doivent être ajustés. Surtout en commençant avec du chrome sans tête, j'étais un peu accro au fait qu'il est nécessaire de spécifier la taille de la fenêtre au moment du caractère de départ.
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')
options.add_argument('--hide-scrollbars')
options.add_argument('--window-size={}'.format(os.environ['WINDOW_SIZE']))
Cette fois, j'ai créé l'URL de manière statique sous forme de capture d'écran, comme indiqué ci-dessous, mais j'ai pensé qu'il serait acceptable de la personnaliser de l'extérieur, car il semble que vous puissiez également spécifier l'élément Dom à capturer.
driver.get(url)
driver.save_screenshot(filename)
À propos de la génération d'image de différence
J'ai fait référence à l'article ici. J'essaie de générer une image de différence de l'image de capture d'écran avec la fonction suivante.
def diff_images(base_image_path, diff_image_path):
"""
referer to https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/
:param base_image_path:
:param diff_image_path:
:return:
"""
# load the two input images
base_image = cv2.imread(base_image_path)
diff_image = cv2.imread(diff_image_path)
# convert the images to grayscale
grayA = cv2.cvtColor(base_image, cv2.COLOR_BGR2GRAY)
grayB = cv2.cvtColor(diff_image, cv2.COLOR_BGR2GRAY)
(score, sub) = compare_ssim(grayA, grayB, full=True)
sub = (sub * 255).astype("uint8")
print("SSIM: {}".format(score))
thresh = cv2.threshold(sub, 0, 255, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)[1]
cnts = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
cnts = imutils.grab_contours(cnts)
for c in cnts:
# compute the bounding box of the contour and then draw the
# bounding box on both input images to represent where the two
# images differ
(x, y, w, h) = cv2.boundingRect(c)
cv2.rectangle(base_image, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.rectangle(diff_image, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.imwrite("/app/dist/base.png ", base_image)
cv2.imwrite("/app/dist/diff.png ", diff_image)
cv2.imwrite("/app/dist/sub.png ", sub)
POST à PR
https://github.com/glassmonkey/vue-sample/blob/master/tests/post.sh
Je publie une image téléchargée vers s3 via Api sur Github en utilisant Action à télécharger vers s3. Pour le traitement, j'ai fait référence à jessfraz / shaking-finger-action.
- Les paramètres de seau utilisés cette fois ont été définis de manière appropriée, je vais donc les omettre. Puisqu'il s'agit d'une spécification que l'image est régénérée à chaque fois qu'elle est validée, elle est divisée en répertoires par SHA de la validation.
résultat
Il a été déposé en toute sécurité sur ce PR.
https://github.com/glassmonkey/vue-sample/pull/3
Résumé
J'ai pu faire un simple test de régression visuelle. Comme c'est un gros problème, il peut être possible de le placer correctement dans un autre référentiel comme une action. Je n'avais pas touché correctement Api sur Github, donc je m'inquiétais vraiment de ce qu'il fallait faire avec la publication d'images. J'ai choisi s3 cette fois, mais il y a peut-être une autre approche. J'ai abandonné car l'installation d'Opencv devient compliquée, mais j'ai abandonné le conteneur de test d'alpin parce qu'il est lent, mais j'aimerais le rendre alpin.