Test d'automatisation avec Playwright 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. Les tests d'automatisation 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 avec des exemples de code. Playwright JavaScript 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 (c'est gratuit et idéal pour créer vos premiers tests) VScode npm install playwright Rédaction de notre premier test 🍾 Cas de test Lancer google.com Rechercher un dramaturge Vérifiez le dramaturge dans le titre après la recherche 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 () => { }); }); 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. beforeAll Par exemple, générez des données pour les tests via l'API ou initialisez les variables que vous utiliserez dans les tests. a la même idée que beforeAll. afterAll 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 nous avons lancé Chrome et navigué sur google.com. de beforeAll, 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 ⬆️ Nous trouvons une entrée sur une page et y écrivons Playwright. est une méthode que vous utiliserez généralement pour entrer la valeur dans l'entrée que vous souhaitez tester. fill await page.fill('id=input', 'Automation testing'); Nous simulons l'appui sur Entrée alors que nous sommes à l'intérieur de cette entrée. await page.press('id=input', 'Enter'); 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(); Enfin, nous utilisons la fonction pour récupérer le titre de la page de résultats de recherche. title const title = await page.title(); 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 nous fermons le navigateur après tous les tests d'afterAll, 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 par de HackerNoon via l'invite "un développeur écrivant du code". le générateur d'images AI
