.png)
.svg){kind=icon}
3 mars 2025
•
10
min lire
Playwright Headless Browser : outil de test rapide et fiable
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
Dramaturge est un framework d'automatisation des tests qui simplifie les tests de navigateur avec une seule API pour Chromium, Firefox et WebKitIl est rapide, fiable et largement adopté, avec plus de 1.2 million de téléchargements hebdomadaires.
npm init playwright@latest| Fonctionnalité | Tests traditionnels | Tests sans tête |
|---|---|---|
| Vitesse | Ralentissez | Jusqu'à 15 fois plus rapide |
| L'utilisation des ressources | Haute | Coût en adjuvantation plus élevé. |
| Support du navigateur | Limité | Chrome, Firefox, WebKit |
Avec Playwright, vous pouvez tester efficacement du contenu dynamique, gérer plusieurs navigateurs et même simuler des appareils et des conditions réseau. Prêt à commencer ? Voyons comment vous pouvez le configurer et créer votre premier test.
Suivez ces étapes pour configurer Playwright en mode sans tête et commencer les tests.
Avant de vous lancer, assurez-vous que votre système répond à ces exigences :
Pour configurer rapidement Playwright, exécutez :
npm init playwright@latest
Cette commande initialise Playwright et génère :
Vous préférez une installation manuelle ? Utilisez les commandes suivantes :
npm i -D @playwright/test
npx playwright install
Playwright exécute les tests en mode headless par défaut, affichant les résultats directement dans le terminal. Pour tout garder à jour, utilisez :
npm install -D @playwright/test@latest
npx playwright install --with-deps
Les tests sur plusieurs navigateurs sont simples avec Playwright. Mettez à jour votre playwright.config.ts fichier comme celui-ci:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
});
Voici comment exécuter des tests :
npx playwright testnpx playwright test --project webkitnpx playwright test --project webkit --project firefoxCompatibilité du navigateur pour Playwright :
| Navigateur | Windows | macOS | Linux |
|---|---|---|---|
| Chromium | ✓ | ✓ | ✓ |
| Firefox | ✓ | ✓ | ✓ |
| WebKit | ✓ | ✓ | ✓ |
Lorsque vous installez Playwright, il télécharge automatiquement les versions de navigateur nécessaires et les stocke localement. Cela garantit des environnements de test cohérents sur différentes plates-formes et machines.
Maintenant que Playwright est configuré, vous êtes prêt à créer votre premier test.
Une fois que vous avez configuré Playwright, voici comment créer et exécuter votre premier test.
Commencez par créer un fichier appelé first-test.spec.ts et ajoutez le code suivant. Ensuite, exécutez le test à l'aide de la commande npx playwright test first-test.spec.ts:
import { test, expect } from '@playwright/test';
test('basic navigation test', async ({ page }) => {
await page.goto('https://playwright.dev');
const title = await page.title();
await expect(title).toBe('Playwright');
});
Voici comment vous pouvez interagir avec les éléments dans Playwright :
test('element interactions', async ({ page }) => {
// Fill out a text field
await page.getByRole('textbox').fill('[email protected]');
// Click a button
await page.getByRole('button', { name: 'Submit' }).click();
// Check a checkbox
await page.getByLabel('Remember me').check();
// Select an option from a dropdown
await page.getByLabel('Country').selectOption('United States');
});
Voici quelques méthodes de localisation courantes que vous pouvez utiliser :
| Type de localisateur | Exemple | Case Study |
|---|---|---|
| Rôle | getByRole('bouton') | Pour les éléments accessibles |
| Étiquette | getByLabel('Mot de passe') | Pour les champs de formulaire |
| Texte | getByText('Inscrivez-vous') | Pour le texte visible |
| ID de test | getByTestId('bouton-soumettre') | Pour les attributs personnalisés |
Pour garantir la fiabilité de vos tests, utilisez des assertions pour vérifier les résultats :
test('verification examples', async ({ page }) => {
// Check if an element is visible
await expect(page.getByRole('heading')).toBeVisible();
// Verify the text content of an element
await expect(page.getByTestId('status')).toHaveText('Success');
// Confirm the URL after navigation
await expect(page).toHaveURL(/.*dashboard/);
// Ensure a button is enabled
await expect(page.getByRole('button')).toBeEnabled();
});
Pour le débogage, vous pouvez exécuter Playwright en mode UI avec cette commande :
npx playwright test --ui
Playwright exécute chaque test dans un contexte de navigateur distinct, garantissant ainsi une exécution propre à chaque fois. Cette isolation évite les interférences entre les tests et, avec le mode headless, maintient une exécution rapide et efficace.
Playwright s'appuie sur des capacités de test de base en proposant des outils qui améliorent la fiabilité et étendent les scénarios de test.
Playwright simplifie les tests de contenu Web dynamique grâce à ses mécanismes d'attente intégrés et à ses assertions Web-first. Il garantit que les éléments sont prêts à interagir, supprimant ainsi le besoin de délais d'attente manuels, qui conduisent souvent à des tests peu fiables.
Voici comment vous pouvez tester efficacement le contenu dynamique :
// Wait for API response before proceeding
await page.waitForResponse(response =>
response.url().includes('/api/data') &&
response.status() === 200
);
// Wait for dynamic content updates
await page.waitForFunction(() => {
const element = document.querySelector('.dynamic-content');
return element && element.textContent.includes('Updated');
});
Pour les situations de problèmes de réseau intermittents, vous pouvez ajouter des mécanismes de nouvelle tentative :
// Retry mechanism for flaky elements
const retryOptions = {
timeout: 30000,
intervals: [1000, 2000, 5000]
};
await page.waitForSelector('.loading-content', retryOptions);
Ensuite, examinons comment Playwright prend en charge l’émulation de périphériques et la simulation de l’état du réseau.
Playwright inclut un registre de périphériques intégré pour émuler différents périphériques. Cette fonctionnalité permet de tester différentes tailles d'écran et configurations d'agent utilisateur.
Voici un exemple d’émulation d’appareil :
const iPhone = playwright.devices['iPhone 13'];
const context = await browser.newContext({
...iPhone,
locale: 'en-US',
geolocation: { longitude: -122.084, latitude: 37.422 },
permissions: ['geolocation']
});
Pour tester les conditions du réseau, vous pouvez utiliser des gestionnaires d’itinéraire :
// Simulate slow network conditions
await page.route('**/*.{jpg,png,jpeg}', route => {
return new Promise(resolve => {
setTimeout(() => {
route.continue();
}, 5000); // 5-second delay
});
});
// Mock API responses
await page.route('/api/data', route => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ status: 'success' })
});
});
Playwright prend en charge l'enregistrement d'artefacts tels que des captures d'écran, des vidéos et des traces pour faciliter le débogage. Ces options peuvent être configurées dans votre playwright.config.js fichier:
| Type d'enregistrement | Configuration | Meilleur cas d'utilisation |
|---|---|---|
| Captures d'écran | screenshot: 'only-on-failure' |
Capturez l'état visuel lors des échecs de test |
| Video | video: 'retain-on-failure' |
Enregistrer l'exécution des tests pour les scénarios ayant échoué |
| Tracer | trace: 'on-first-retry' |
Générer des journaux détaillés pour le débogage |
Voici comment activer ces fonctionnalités :
// playwright.config.js
module.exports = {
use: {
screenshot: 'only-on-failure',
video: 'retain-on-failure',
trace: 'on-first-retry'
}
};
« Playwright attend que les éléments soient exploitables avant d'effectuer des actions... élimine le besoin de délais d'attente artificiels - la principale cause des tests instables. » - Documentation Playwright
Tous les artefacts enregistrés sont stockés dans le test-results répertoire, offrant des informations précieuses pour le dépannage. Les vidéos sont enregistrées automatiquement lorsque le contexte du navigateur se ferme.
L'amélioration des performances des tests dans Playwright implique une utilisation intelligente de l'exécution parallèle, une gestion efficace du contexte du navigateur et des stratégies de nouvelle tentative bien pensées. Ces méthodes permettent de garantir l'efficacité des tests sans compromettre la fiabilité.
Playwright vous permet d'exécuter des tests sur plusieurs processus de travail, ce qui peut réduire considérablement le temps nécessaire pour terminer une suite de tests. Vous pouvez configurer l'exécution parallèle dans playwright.config.ts:
export default {
fullyParallel: true,
workers: 4,
maxFailures: 5
};
Dans un fichier de test, vous pouvez activer l'exécution parallèle comme ceci :
test.describe.configure({ mode: 'parallel' });
test.describe('User Authentication', () => {
test('login flow', async ({ page }) => {
// Test implementation
});
test('registration flow', async ({ page }) => {
// Test implementation
});
});
Pour éviter les conflits de données entre les travailleurs, utilisez des identifiants uniques :
const testId = `user_${process.env.TEST_WORKER_INDEX}_${Date.now()}`;
const userEmail = `test_${testId}@example.com`;
Une fois la parallélisation configurée, la gestion efficace des contextes du navigateur est l’étape suivante.
L'utilisation de contextes de navigateur distincts garantit des environnements de test isolés, similaires à l'utilisation de profils incognito. Cela permet de maintenir l'indépendance des tests et d'éviter les conflits d'état.
Voici un exemple de création et d’utilisation d’un contexte de navigateur :
const context = await browser.newContext({
viewport: { width: 1280, height: 720 },
userAgent: 'Playwright/1.32.0',
storageState: './auth.json'
});
await test.step('Verify dashboard', async () => {
const page = await context.newPage();
await page.goto('https://app.example.com/dashboard');
// Test implementation
});
await context.close();
Certaines stratégies courantes de contexte de navigateur incluent :
Après avoir assuré des environnements propres et isolés, l’objectif suivant est de gérer les pannes transitoires avec des stratégies de nouvelle tentative.
Les tentatives répétées peuvent aider à gérer les tests instables causés par des problèmes de synchronisation ou une instabilité environnementale. Vous pouvez configurer les tentatives répétées dans le fichier de configuration de Playwright :
export default {
retries: process.env.CI ? 2 : 0,
expect: {
timeout: 10000,
toPass: { intervals: [1000, 2000, 5000] }
}
};
Pour les assertions qui pourraient nécessiter plusieurs tentatives, utilisez l'interrogation :
await expect
.poll(async () => {
const element = page.locator('.dynamic-content');
return await element.textContent();
}, {
intervals: [1000, 2000, 10000],
timeout: 60000
})
.toBe('Expected Value');
« Bien que les nouvelles tentatives améliorent la fiabilité des tests, une utilisation excessive peut masquer des problèmes tels que les dépassements de délai et les conditions de concurrence. Il est essentiel de résoudre les causes profondes des tests stables, en appliquant judicieusement les nouvelles tentatives avec des restrictions et en enregistrant les données pour les modèles instables. » – Cerosh Jacob
Pour vous assurer que la page est entièrement chargée avant d'exécuter vos tests :
await page.waitForLoadState('networkidle', { timeout: 5000 });
await page.waitForSelector('.content-ready');
L'intégration de Playwright avec la plateforme low-code de Latenode simplifie les tests Web et l'automatisation des workflows. Cette association permet aux équipes de créer des tests avancés sans avoir besoin de compétences approfondies en codage.
Latenode complète les fonctionnalités de Playwright en étendant l'automatisation à des exigences de flux de travail plus larges.
Latenode est une plateforme low-code conçue pour l'intégration et l'automatisation des workflows, exploitant la technologie du navigateur headless. Son générateur de workflow visuel facilite la création et la gestion de configurations de tests automatisés sans écrire de code complexe.
Voici un exemple de la manière dont l'automatisation du navigateur de Latenode peut être configurée :
// Example of a Latenode workflow configuration
const workflowConfig = {
browserAutomation: {
viewport: { width: 1920, height: 1080 },
headless: true,
scenarios: ['login', 'data-extraction', 'form-submission']
}
};
La combinaison de Playwright et de Latenode apporte plusieurs avantages techniques :
| Fonctionnalité | Bénéfice |
|---|---|
| Visual Workflow Builder | Simplifie la configuration par rapport aux méthodes de codage traditionnelles |
| Génération de code assistée par l'IA | Génère automatiquement des scripts de test Playwright |
| Intégration de base de données intégrée | Gère efficacement les données et les résultats des tests |
| Prise en charge de plusieurs navigateurs | Exécute des tests sur Chromium, Firefox et WebKit |
Cette intégration améliore les flux de travail de test et améliore les processus d'automatisation.
Cette combinaison prend en charge une variété de scénarios d'automatisation pratiques. Par exemple :
// Example of a multi-browser test workflow
async function crossPlatformTest() {
const workflow = await latenode.createWorkflow({
name: 'E2E Testing Suite',
browser: playwright.chromium,
integrations: ['slack', 'jira']
});
await workflow.addStep({
type: 'ui-test',
script: async ({ page }) => {
await page.goto('https://app.example.com');
await page.fill('#username', process.env.TEST_USER);
await page.click('#submit');
}
});
}
Pour les tests à grande échelle, le plan Prime de Latenode (297 $/mois) prend en charge jusqu'à 1.5 million d'exécutions de scénarios. Ce plan est idéal pour les équipes ayant besoin d'outils de collaboration avancés et de rapports détaillés.
De plus, les fonctionnalités de base de données intégrées de Latenode aident les équipes à gérer les données et les résultats des tests sans infrastructure supplémentaire. Les rapports et analyses automatisés facilitent l'identification des tendances et affinent efficacement les stratégies de test.
Playwright propose une gamme de fonctionnalités avancées et d'améliorations des performances qui en font un choix de premier ordre pour les tests automatisés. Voici un bref récapitulatif de ses principaux avantages.
Les tests de navigateur sans tête de Playwright améliorent considérablement les performances en évitant les tâches de rendu inutiles. Les tests montrent que le mode sans tête peut fonctionner 2x à 15x plus rapide que les tests de navigateur traditionnels.
Certains des principaux avantages en termes de performances incluent :
| Aspect de test | Comparaison |
|---|---|
| Vitesse de scraping Web | 56.21 secondes (sans tête) contre 73.77 secondes (avec tête) |
| L'utilisation des ressources | Utilisation réduite du processeur et de la mémoire |
| Support du navigateur | Chrome (64.16 %), Safari (19.62 %), Edge (4.87 %) |
Ces avantages, combinés aux stratégies de configuration et de test décrites précédemment, font de Playwright un outil puissant pour une automatisation évolutive et efficace.
Les performances et l'évolutivité de Playwright en font un excellent choix pour les flux de travail de test modernes. Comme l'explique Arjun Attam, Senior Product Manager chez Microsoft :
« Les tests automatisés de bout en bout sont devenus plus importants que jamais. Les équipes livrent plus rapidement et créent des applications qui fonctionnent sur un nombre croissant d'appareils. Cette augmentation de la vitesse et des cibles Web exerce une pression immense sur le processus de test, et l'automatisation est essentielle. »
Pour commencer à utiliser Playwright pour les tests sans tête :
npm init playwright@latest .example.spec.js).npx playwright test .Pour une intégration transparente, connectez Playwright à votre pipeline CI/CD à l'aide d'outils tels que Jenkins or Actions GitHub Son API unifiée permet des tests cohérents sur Chrome, Firefox et WebKit sans nécessiter de modifications de code spécifiques au navigateur.
Le mode headless de Playwright est idéal dans les environnements exigeants en performances et les pipelines CI/CD, où un retour rapide est crucial. Sa capacité à gérer efficacement plusieurs instances de navigateur en fait un choix de premier ordre pour les opérations de test à grande échelle.
