Du manuel à l'automatisé : Rédigez votre premier test avec Playwright

Test d'automatisation avec Playwright

Les tests d'automatisation gagnent en popularité chaque jour et de nombreux outils sont disponibles pour vous aider à en être le maître. Parfois, le plus difficile est de choisir le bon.

Playwright est un excellent outil qui gagne en popularité en raison de sa flexibilité et de sa facilité d'utilisation, en particulier avec JavaScript. Le dramaturge est considéré comme l'un des plus rapides pour exécuter des tests d'interface utilisateur. Dans cet article, nous discuterons du processus d'écriture de votre premier test avec Playwright en utilisant JavaScript avec des exemples de code.

Installation de Playwright

Avant de commencer à écrire notre premier scénario de test, vous devez installer Playwright. Vous pouvez le faire en exécutant la commande suivante dans votre terminal à l'intérieur de l'IDE. Je recommanderais également d'installer VScode (c'est gratuit et idéal pour créer vos premiers tests)

 npm install playwright

Rédaction de notre premier test 🍾

Cas de test

1. Lancer google.com
2. Rechercher un dramaturge
3. Vérifiez le dramaturge dans le titre après la recherche
4. Fermer le navigateur

Commençons d'abord par écrire l'architecture de notre test.

 const { chromium } = require('playwright'); describe('Google Search Test', () => { let browser; let page; beforeAll(async () => { }); afterAll(async () => { }); it('should return result search in google ', async () => { }); });

beforeAll se produit toujours une fois avant tous les tests. C'est très pratique à utiliser pour configurer les exigences de test avant les tests réels. Par exemple, générez des données pour les tests via l'API ou initialisez les variables que vous utiliserez dans les tests.

afterAll a la même idée que beforeAll.

Cela se produit après tous les tests une seule fois. Vous pouvez utiliser pour fermer un navigateur ou effectuer certaines actions pour nettoyer les données après avoir exécuté des tests.

Nous avons besoin de ces variables pour travailler avec un navigateur et une page plus tard.

 let browser; let page;

Ceci est un corps de test, où nous allons écrire notre test réel.

 it('should return result search in google ', async () => { });

Ajoutons l'ouverture d'un navigateur à l'intérieur de beforeAll

 beforeAll(async () => { browser = await chromium.launch(); // here you can use any other browser if you want page = await browser.newPage(); await page.goto('https://www.google.com'); });

À l'intérieur de beforeAll, nous avons lancé Chrome et navigué sur google.com.

Ajoutons un corps de test

 it('should return search results', async () => { await page.fill('id=input', 'Automation testing'); // you an search any other text here await page.press('id=input', 'Enter'); await page.waitForNavigation(); const title = await page.title(); expect(title).toContain('Automation testing'); });

Notre résultat ⬆️

1. Nous trouvons une entrée sur une page et y écrivons Playwright. fill est une méthode que vous utiliserez généralement pour entrer la valeur dans l'entrée que vous souhaitez tester.

 await page.fill('id=input', 'Automation testing');

2. Nous simulons l'appui sur Entrée alors que nous sommes à l'intérieur de cette entrée.

 await page.press('id=input', 'Enter');

3. Nous attendons que la page se charge. Nous ne continuerons donc pas les tests avant que la page ne soit complètement chargée.

 await page.waitForNavigation();

4. Enfin, nous utilisons la fonction title pour récupérer le titre de la page de résultats de recherche.

 const title = await page.title();

5. En utilisant l'assertion, nous vérifions si le titre contient Playwright (ou une autre chaîne que nous recherchions pour confirmer que nous avons redirigé vers la bonne page)

 expect(title).toContain('Automation testing');

Ajoutons la fermeture du navigateur dans afterAll

 afterAll(async () => { await browser.close(); });

À l'intérieur d'afterAll, nous fermons le navigateur après tous les tests

Exécution de votre test

Cela exécutera tous vos tests

 npx playwright test

Si vous souhaitez exécuter un fichier de test spécifique

 npx playwright test your-file.js

Lorsque vous exécutez vos tests, Playwright génère également des rapports HTML, qui sont très utiles pour le débogage. Il divise votre test en étapes, et si vous avez un test qui a échoué, vous pouvez toujours voir où l'échec s'est produit et le déboguer plus rapidement.

Exécutez ceci pour ouvrir votre rapport

 npx playwright show-report

L'image principale de cet article a été générée parle générateur d'images AI de HackerNoon via l'invite "un développeur écrivant du code".