Comment exécuter un test de dramaturge séquentiellement dans le même contexte de navigateur

The Playwright est un nouveau framework d’automatisation de Microsoft. Le framework Playwright est distribué sous licence MIT Open Source. Playwright prend en charge divers langages de programmation tels que Java, JavaScript, TypeScript, .Net, etc.

Le dramaturge exécute chaque scénario dans son propre nouveau contexte de navigateur

Si vous avez travaillé avec le framework Playwright, vous avez peut-être remarqué que si vous écrivez plusieurs tests dans le describe fonction, il est exécuté l’un après l’autre mais chaque test s’exécute dans un contexte de navigateur distinct. Cela signifie que si vous avez effectué une connexion dans test1() il ne préserve pas ceux dans test2(). La raison en est que chaque fois que le dramaturge exécute le test, il crée un nouveau contexte et exécute le test. Cette fonctionnalité vous permet également d’écrire des tests indépendants et vous pouvez les exécuter en parallèle avec moins de temps d’exécution.

Si vous êtes familier avec les rapporteurs ou si vous recherchez une solution où les tests à l’intérieur du fichier unique doivent être exécutés étape par étape, cet article est pour vous. De nombreuses personnes ont recherché sur Internet les questions ci-dessous :

Comment exécuter le test Playwright dans un seul/même contexte de navigateur ?
Comment désactiver l’exécution parallèle de Playwright au niveau du test ?
Comment définir le contexte du navigateur dans Playwright ?
Comment exécuter les tests Playwright de manière séquentielle ?

Comprenons d’abord le problème en examinant le code ci-dessous (qui sont des échecs de test):

// This test doesn't pass

import { test, expect, chromium, Page} from '@playwright/test';

test.describe('test',async()=>{
  test('Navigate to Google', async ({page}) => {
    await page.goto('https://google.com/');
    const url=await page.url();
    expect(url).toContain('google');
  });

  test('Search for Playwright', async ({page}) => {
    await page.type('input[name="q"]',"Playwright")
    await page.keyboard.press('Enter');
    let text=await page.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  });
});

Le code ci-dessus ne fonctionne pas. Il y a deux essais à l’intérieur de describe bloquer:

test(Navigate to Google): Où nous naviguons vers
test(Search for Playwright): Nous supposons que dans le premier test, nous avons déjà navigué vers Google, nous autorisons donc les tests

Si nous venons d’un autre contexte de framework, vous pourriez penser que vous devez d’abord accéder à google.com, puis taper dramaturge dans le deuxième test. Cependant, dans Playwright, cela ne fonctionne pas de cette façon. Les deux tests s’exécutent dans un contexte distinct puisque nous passons {page} comme argument de la fonction test. Même si tu cours avec workers=1, le test ci-dessus échoue.

Plongeons dans la solution au problème ci-dessus.

Exécution de tests/scénarios de dramaturge à l’intérieur du bloc Describe de manière séquentielle dans le même contexte de navigateur

Si vous cherchez une solution comme des scénarios dans le Dramaturge describe bloquer, vous devez exécuter l’un après l’autre dans le navigateur. En conservant l’état précédent, vous pouvez modifier vos tests ci-dessous.

1. Définissez l’instance de page dans `beforeAll()`

//inside your describe block  
let page:Page; //create variable with page
  test.beforeAll(async ({browser}) =>{
    page = await browser.newPage(); //Create a new Page instance
  });

2. Ne transmettez pas la page en paramètre à vos tests

//inside describe block, after beforeAll()  
test('Navigate to Google', async () => {
    await page.goto('https://google.com/');
    const url=await page.url();
    expect(url).toContain('google');
  });

  test('Search for Playwright', async () => {
    await page.type('input[name="q"]',"Playwright")
    await page.keyboard.press('Enter');
    let text=await page.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  });

Si vous regardez le code ci-dessus, le test() n’a pas {page} context passé en argument ici, il prend donc de la page que nous avons initiée sous le beforeAll().

Tout mettre ensemble

import { test, expect, Page } from '@playwright/test';

test.describe('test', async () => {
  let page: Page;
  test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();
  });

  test('Navigate to Google', async () => {
    await page.goto('https://google.com/');
    const url = await page.url();
    expect(url).toContain('google');
  });

  test('Search for Playwright', async () => {
    await page.type('input[name="q"]', "Playwright")
    await page.keyboard.press('Enter');
    let text = await page.innerText('//h3[contains(text(),"Playwright:")]')
    expect(text).toContain('Playwright: Fast and reliable');
  });
});

Noter: Playwright recommande d’exécuter chaque test dans un contexte distinct.

Avec l’approche ci-dessus, vos tests s’exécutent comme n’importe quel autre code de framework dans le même contexte de navigateur.

Si vous avez besoin d’aide, de soutien, d’orientation, contactez-moi sur LinkedIn.