testcafe screenshot

compare-screenshot.sh

#!/bin/bash

# sudo apt install imagemagick

git checkout master
yarn qa:test
mv testcafe_screenshots/branch testcafe_screenshots/origin
rm -rf testcafe_screenshots/origin/thumbnails
git checkout -
yarn qa:test

rm -rf testcafe_screenshots/diff
mkdir testcafe_screenshots/diff

for screenshot in $(ls testcafe_screenshots/origin/); do
  convert testcafe_screenshots/origin/$screenshot origin.rgba
  convert testcafe_screenshots/branch/$screenshot branch.rgba
  cmp -s {origin,branch}.rgba

  if [ $? != 0 ]; then
    convert '(' testcafe_screenshots/origin/$screenshot -flatten -grayscale Rec709Luminance ')' \
            '(' testcafe_screenshots/branch/$screenshot -flatten -grayscale Rec709Luminance ')' \
            '(' -clone 0-1 -compose darken -composite ')' \
            -channel RGB -combine testcafe_screenshots/diff/$screenshot

    rm origin.rgba
    rm branch.rgba

    exit 1
  fi
done

rm origin.rgba
rm branch.rgba

screenshot.js

import { Selector, t } from 'testcafe'

import { ROOT_PATH } from '../src/utils/config'

import { createUserRole } from './helpers/roles'
import fetchSandbox from './helpers/sandboxes'

/*
Avantages :
 - Efficacité de la revue quand on modifie beaucoup de CSS
 - Permet d'avoir une bibliothèque de capture d'écran du site

Inconvénients :
 - Prend environ 1m 10s

Ce qu'il manque :
 - La sélection d'un local provider sur un lieu
 - Les notifications d'erreur (bannière du haut)
 - Le spinner au chargement d'une page
 - Pas testé sur la CI

Stratégies d'adoption :
 1/ Insérer les captures dans nos tests existants et rajouter les manquant et lancer à chaque CI
 2/ Lancer à la demande sur la CI et en parralèle

Utilisation :
 - Lancer le script bash
*/

fixture('Quality Assurance,').page(ROOT_PATH)

test('captures d’écran de toutes les pages du site', async () => {
  await takeScreenshot('connexion')
  await takeScreenshot('mot-de-passe-perdu')
  await takeScreenshot('inscription')
  await takeScreenshot('inscription/confirmation')

  const { user } = await fetchSandbox(
    'pro_06_offers',
    'get_existing_pro_validated_user_with_at_least_one_visible_activated_offer'
  )
  await t.useRole(createUserRole(user))

  await takeScreenshot('404')
  await t
    .navigateTo('/accueil')
    .takeScreenshot(optionsOfScreenshot('accueil'))
    .click(Selector('a').withText('Fred Leopold'))
    .takeScreenshot(optionsOfScreenshot('menu'))
  const contremarque = Selector('label').withText('Contremarque')
  await t
    .navigateTo('/guichet')
    .typeText(contremarque, 'FAAKEE', { replace: true })
    .takeScreenshot(optionsOfScreenshot('guichet-FAAKEE'))
  await t
    .navigateTo('/guichet')
    .typeText(contremarque, '100000', { replace: true })
    .takeScreenshot(optionsOfScreenshot('guichet'))
  await t
    .navigateTo('/offres')
    .click(Selector('input[type="checkbox"]'))
    .click(Selector('.field-date-end .period-filter-input'))
    .takeScreenshot(optionsOfScreenshot('offres'))
    .typeText(Selector('label').withText('Nom de l’offre'), 'search without result')
    .click(Selector('button').withText('Lancer la recherche'))
    .takeScreenshot(optionsOfScreenshot('offres-search-without-result'))
  await t
    .navigateTo('/offres')
    .click(Selector('table a'))
    .takeScreenshot(optionsOfScreenshot('offre'))
    .click(Selector('button').withText('Gérer les stocks'))
    .takeScreenshot(optionsOfScreenshot('offre-stocks'))
    .click(Selector('button').withText('Fermer'))
    .click(Selector('a').withText('Modifier l’offre'))
    .takeScreenshot(optionsOfScreenshot('offre-edition'))
    .click(Selector('a').withText('Ajouter une accroche'))
    .typeText(Selector("input[placeholder='URL du fichier']"), 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Zebra_%28PSF%29.png')
    .click(Selector('button').withText('OK'))
    .takeScreenshot(optionsOfScreenshot('offre-accroche'))
  await t
    .navigateTo('/offres/creation')
    .click(Selector('select').withText('Sélectionnez un type d’offre'))
    .click(Selector('select option').withText('Conférences, rencontres et découverte des métiers'))
    .takeScreenshot(optionsOfScreenshot('offre-creation'))
  await t
    .navigateTo('/reservations')
    .click(Selector('img[alt="Filtrer par statut"]'))
    .takeScreenshot(optionsOfScreenshot('reservations'))
    .typeText(Selector(`input[placeholder="Rechercher par nom d'offre"]`), 'search without result')
    .takeScreenshot(optionsOfScreenshot('reservations-search-without-result'))
  await t
    .navigateTo('/profil')
    .takeScreenshot(optionsOfScreenshot('profil'))
    .click(Selector('button').withText('Enregistrer'))
    .takeScreenshot(optionsOfScreenshot('profil-success-banner'))
  await t
    .navigateTo('/structures')
    .takeScreenshot(optionsOfScreenshot('structures'))
    .click(Selector('a').withText('Club Dorothy'))
    .takeScreenshot(optionsOfScreenshot('structure'))
    .click(Selector('a').withText('+ Ajouter un lieu'))
    .takeScreenshot(optionsOfScreenshot('lieu-creation'))
    .click(Selector('button').withText('Annuler'))
    .click(Selector('a').withText('Maison de la Brique'))
    .takeScreenshot(optionsOfScreenshot('lieu'))
    .click(Selector('a').withText('Modifier le lieu'))
    .takeScreenshot(optionsOfScreenshot('lieu-edition'))
  await takeScreenshot('structures?mots-cles=search-without-result')
  await takeScreenshot('structures/creation')
  await takeScreenshot('styleguide')
  await takeScreenshot('remboursements')
  await takeScreenshot('remboursements/detail') // TODO: je vois du JS...
})

const takeScreenshot = async (path) => {
  await t
    .navigateTo(`/${path}`)
    .takeScreenshot(optionsOfScreenshot(path))
}

const optionsOfScreenshot = (path) => (
  {
    path: `quality_assurance/${path.replace(/(\/|\?|=)/g, '-')}.png`,
    fullPage: true,
  }
)

screenshot.spec.js

// Pas de async/await !
// Relativement la même syntaxe
// Un peu plus rapide que testcafe surtout si on divise en 'it'

// On voit le loader parfois
// Ca ne charge pas tout le css parfois

/*
yarn add -D cypress eslint-plugin-cypress
cypress open
 => pour qu'il crée l'arbo, ne se passe rien sous WSL2
*/

/*
cypress.json
{
  "baseUrl": "http://localhost:3001/",
  "viewportWidth": 1280,
  "viewportHeight": 800,
  "video": false
}

.eslintrc
{
  "extends": [
    "plugin:cypress/recommended"
  ]
}

package.json
{
  "scripts": {
    "cypress": "NODE_ENV=test cypress run --quiet"
  }
}
*/

describe('Quality Assurance,', () => {
  it('Captures d’écran de toutes les pages du site', () => {
    cy.visit('connexion')
      .screenshot('connexion')
    cy.visit('mot-de-passe-perdu')
      .screenshot('mot-de-passe-perdu')
    cy.visit('inscription')
      .screenshot('inscription')
    cy.visit('inscription/confirmation')
      .screenshot('inscription-confirmation')

    // TODO: comment se connecter ?
  })
})