Pour finir nos \u00e9tapes de d\u00e9ploiement continu, une question se pose toujours apr\u00e8s la livraison du code.
Est-ce que mon site fonctionne toujours ?
Est-ce que le module que j’ai install\u00e9 ne casse rien ?<\/p>\n
Pour r\u00e9pondre \u00e0 cette question, il est souvent n\u00e9cessaire de faire des tests manuels des parcours critiques. Cette librairie est utilis\u00e9e par Prestashop pour faire l’ensemble des tests automatis\u00e9s de la solution. Libre \u00e0 vous ensuite de vous en inspirer pour ajouter d’autres cas, la librairie est tr\u00e8s simple \u00e0 prendre en main.<\/p>\n Nous allons ajouter la librairie dans un dossier tests\/e2e<\/strong> ( end to end ) en suivant la documentation officielle : https:\/\/playwright.dev\/docs\/intro<\/a> Une fois la librairie install\u00e9e, vous pouvez lancer la commande : npx playwright test. Ces tests ne sont absolument pas li\u00e9 \u00e0 notre instance. Pour g\u00e9rer la configuration, installer la librairie dotenv via la commande suivante : Notre premier test va \u00eatre tr\u00e8s basique, on va v\u00e9rifier le bon fonctionnement du formulaire de recherche. Pour cela on va cr\u00e9er un fichier search.spec.ts<\/strong> dans notre dossier e2e\/tests<\/em> avec le contenu suivant :<\/p>\n\n\n\n On va ensuite v\u00e9rifier que ce test fonctionne via la commande suivante : npx playwright test –headed Pour commencer rajouter une variable WEBSITE_URL<\/strong> dans gitlab avec l’url de votre boutique ( de test ) Si on pousse ces changements, on peut voir qu’une nouvelle \u00e9tape appara\u00eet dans le pipeline. La base technique est maintenant fonctionnelle, on a bien des tests automatiques qui se lancent apr\u00e8s la livraison de notre code. Comme \u00e9voqu\u00e9 plus haut on va ajouter 2 nouveaux tests<\/p>\n Login customer dans le fichier customer.spec.ts<\/em> avec le contenu suivant :<\/p>\n\n\n\n Et un fichier d’ajout au panier catalog. On peut pousser le code, et si on retourne dans notre onglet \u00ab\u00a0Test\u00a0\u00bb on va voir qu’il y’a bien une erreur \u00e0 pr\u00e9sent.<\/p>\n\n\n\n Il est possible de voir les d\u00e9tails de l’erreur en cliquant sur le bouton \u00ab\u00a0View details\u00a0\u00bb. Puis ensuite aller dans le dossier tests\/e2e\/playwrigt-report et cliquer sur le lien \u00ab\u00a0index.html\u00a0\u00bb
C’est long et r\u00e9p\u00e9titif, mais nous allons voir \u00e0 travers cette \u00e9tape comment mettre en place des tests fonctionnels qui vont v\u00e9rifier ce comportement pour nous \ud83d\ude42
Pour cela nous allons utiliser la librairie playwright : https:\/\/playwright.dev\/ <\/a><\/p>\n\n\n\nPlaywright<\/h2>\n\n\n\n
Il existe d\u00e9j\u00e0 des tests qui couvrent de grandes parties de la solution.
Pour autant ils sont beaucoup trop nombreux pour \u00eatre lanc\u00e9s \u00e0 chaque d\u00e9ploiement de code.
C’est pourquoi nous allons uniquement nous concentrer sur les parcours critiques.
Pour l’exemple de ce tutoriel nous v\u00e9rifierons 3 sc\u00e9narios :<\/p>\n\n
Pour ma part je suis sous linux et j’installe l’ensemble des d\u00e9pendances dont les diff\u00e9rents navigateurs.
Ceci prends quelques minutes le temps de tout t\u00e9l\u00e9charger.
Pour ceux qui ne connaissent pas encore la librairie je vous conseille de prendre ce temps \u00e0 lire la documentation qui est tr\u00e8s bien r\u00e9alis\u00e9e pour comprendre comment fonctionne cette librairie.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2023\/09\/image-13-1024x171.png\")
<\/a><\/figure>\n\n\n\n
Si tout fonctionne vous devriez avoir le r\u00e9sultat suivant :
Dans le cas contraire je vous renvoie \u00e0 la documentation.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2023\/09\/image-14.png\")
<\/a><\/figure>\n\n\n\n
On va maintenant commencer \u00e0 les faire.<\/p>\n\n\n\nConfiguration <\/h2>\n\n\n\n
npm install dotenv –save
Puis cr\u00e9er un fichier .env<\/em> et rajouter une variable WEBSITE_URL<\/em> avec l’url de votre instance locale de test
\u00c9diter ensuite le fichier playwright.config.ts <\/em>avec le contenu suivant :<\/p>\n\n\n\n\nimport { defineConfig, devices } from '@playwright\/test';\nrequire('dotenv').config();\nexport default defineConfig({\n testDir: '.\/tests',\n fullyParallel: true,\n forbidOnly: !!process.env.CI,\n retries: process.env.CI ? 2 : 0,\n workers: process.env.CI ? 1 : undefined,\n \/\/On modifie ICI les rapports, pour ajouter le format junit qui sera ensuite utilis\u00e9 dans la CI\n reporter: [ ['html'], ['junit', { outputFile: 'results.xml' }] ], \n use: {\n baseURL: process.env.WEBSITE_URL, \/\/On modifie ici l'url pour prendre celle du .env ou de la CI\n trace: 'on-first-retry',\n screenshot: 'only-on-failure', \/\/On ajoute une capture dans l'erreur\n },\n projects: [\n \/\/ {\n \/\/ name: 'chromium',\n \/\/ use: { ...devices['Desktop Chrome'] },\n \/\/ },\n \/\/On active uniquement un navigateur pour gagner du temps, pour ma part je fais sur firefox \n \/\/mais vous pouvez le faire \u00e9galement sous chrome ou safari\n {\n name: 'firefox',\n use: { ...devices['Desktop Firefox'] },\n },\n ],\n});\n<\/pre>\n\n\n\nPremier test<\/h2>\n\n\n\n
Pour cela on va r\u00e9aliser les \u00e9tapes suivantes :<\/p>\n\n
\nimport { test, expect } from '@playwright\/test';\n\ntest('Product search', async ({ page }) => {\n let searchTerm = 'Mug'; \/\/D\u00e9finition du terme de recherche\n await page.goto('fr\/'); \/\/On se rends sur la homepage\n await page.locator('#search_widget .ui-autocomplete-input').fill(searchTerm);\/\/On saisi le terme de recherche\n await page.locator('#search_widget .ui-autocomplete-input').press('Enter');\/\/On valide la recherche\n \/\/On v\u00e9rifie ensuite qu'on est bien sur la page de la recherche\n await expect(page.locator('h1')).toHaveText('R\u00e9sultats de la recherche'); \/\/Via le titre de la page\n \/\/On s'assure que le bloc \"Aucun produit ne correspond \u00e0 votre recherche\" n'est pas affich\u00e9\n await expect(await page.locator('section.page-not-found').count()).toEqual(0);\n});\n<\/pre>\n\n\n\n
(En rajoutant l’option headed on peut voir ce qui se passe durant le test )
Si le test fonctionne, avant de faire les suivants on va mettre tout \u00e7a dans notre int\u00e9gration continue<\/p>\n\n\n\nAjout dans l’int\u00e9gration continue<\/h2>\n\n\n\n
Puis nous allons ajouter le contenu suivant dans le fichier .gitlab-ci.yml<\/em>
Les tests seront uniquement lanc\u00e9s sur la branche dev pour l’instant ( et donc sur le site de preprod )<\/p>\n\n\n\n\n#Rajouter une \u00e9tape post_deploy en haut du fichier ( existe d\u00e9j\u00e0 sans post_deploy)\nstages:\n - test\n - deploy\n - post_deploy\n\n# Nouvelle \u00e9tape des Tests automatiques\ntest:e2e:\n stage: post_deploy\n image: mcr.microsoft.com\/playwright:v1.38.1-focal\n only:\n - dev # Uniquement la branche dev\n artifacts: # On g\u00e9n\u00e9re des artifacts avec les r\u00e9sultats des tests\n when: always\n paths:\n - tests\/e2e\/playwright-report\/\n - tests\/e2e\/test-results\/\n - tests\/e2e\/results.xml\n reports:\n junit: tests\/e2e\/results.xml\n script:\n - cd tests\/e2e\n - npm ci\n - npx playwright test --url=$WEBSITE_URL\n<\/pre>\n\n\n\n
Ainsi qu’un nouvel onglet \u00ab\u00a0Tests\u00a0\u00bb qui nous permets de voir les r\u00e9sultats de nos tests .
Dans notre cas tout \u00e0 fonctionn\u00e9 comme pr\u00e9vu<\/p>\n\n\n\n![\"\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2023\/09\/image-15.png\")
<\/a><\/figure>\n\n\n\n
On va pouvoir ajouter de nouveaux tests pour v\u00e9rifier si cela fonctionne.<\/p>\n\n\n\nAjout de nouveaux tests et analyse des erreurs<\/h2>\n\n\n\n
\nimport { test, expect } from '@playwright\/test';\n\ntest('Test customer login', async ({ page }) => {\n\n await page.goto('fr\/'); \/\/On se rend sur la homepage\n await page.locator('.user-info a').click()\/\/On clique sur le bouton \"Connexion\"\n\n \/\/On remplit le formulaire de connexion\n await page.locator('#field-email').fill('pub@prestashop.com')\/\/Login\n await page.locator('#field-password').fill('123456789')\/\/Password\n await page.locator('#submit-login').click()\/\/On clique sur le bouton \"Connexion\"\n\n \/\/On v\u00e9rifie que l'utilisateur est bien connect\u00e9\n await expect(page.locator('h1')).toHaveText('Votre compte'); \/\/Via le titre de la page\n await expect(page.locator('.user-info')).toContainText('D\u00e9connexion');\/\/et via les informations du compte en haut de page\n});\n<\/pre>\n\n\n\n
Avec le contenu suivant :<\/p>\n\n\n\n\nimport { test, expect } from '@playwright\/test';\n\ntest('Assert that a product can be added to cart', async ({ page }) => {\n \/\/Ouverture de la page produit\n await page.goto('\/ERROR-URL');\n \/\/Clic sur le bouton d'ajout au panier\n await page.locator('[data-button-action=\"add-to-cart\"]').click();\n \/\/On v\u00e9rifie que la popin d'ajout au panier est bien affich\u00e9e\n await expect(page.locator('#blockcart-modal')).toBeVisible();\n \/\/Et que le message \"Produit ajout\u00e9 au panier avec succ\u00e8s\" est pr\u00e9sent\n await expect(page.locator('#myModalLabel')).toContainText(\"Produit ajout\u00e9 au panier avec succ\u00e8s\");\n \/\/Clic sur le bouton \"Continuer mes achats\"\n await page.locator('.cart-content-btn .btn-secondary').click();\n});\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2023\/09\/image-16.png\")
<\/a><\/figure>\n\n\n\n
Mais \u00e9galement de voir les rapports complets d’erreurs en parcourant les artefacts du build.
Pour cela il faut aller dans l’onglet \u00ab\u00a0Jobs\u00a0\u00bb puis visualiser les d\u00e9tails.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2023\/09\/image-17-1024x480.png\")
<\/a><\/figure>\n\n\n\n
Ceci nous permets ensuite d’acc\u00e9der au rapport playwright et de visualiser les captures d’erreur.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2023\/09\/image-18.png\")
<\/a><\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n