Installer Nouveau projet PlayWrite

  • cd nextgen/app/qa/tests-ui
  • mkdir playwright-ui-testing
  • cd playwright-ui-testing
  • npm init playwright@latest
    Répondre aux questions en faisant <CR>
  • cd ..
  • pnpm exec playwright test --ui

Le lien d'installation est https://advans-group.atlassian.net/wiki/spaces/Cruiseline/pages/5237538817/QA+-+Playwright+Setup+and+Test+Execution+Guide+with+VS+Code+PNPM

https://grafikart.fr/tutoriels/test-end-to-end-playwright-2020

Notes :

  • Les fichiers dans le répertoire tests
  • Il faut que les fichiers de tests se terminent par .spec.ts afin qu'ils soient pris en compte comme des fichiers de tests

Répertoire de travail des tests :

Il faut que l'on soit dans le répertoire : 

  • nextgen/app/qa/tests-ui
  • Pour lancer le test : pnpm exec playwright test --ui

Vérifier l’URL actuelle

const homePageUrl = 'https://monsite.com';

if (page.url() !== homePageUrl) {
  await page.goto(homePageUrl);
}

Vérifier seulement l’existence dans le DOM

await expect(page.getByTestId('v2')).toHaveCount(1);

Vérifier qu'un data-testid existe dans le DOM :

const exists = await page.getByTestId('v2').count() > 0;

if (exists) {
  console.log('Element présent');
} else {
  console.log('Element absent');
}

Vérifier qu'un data-testid existe ET est visible :

const locator = page.getByTestId('v2');

await expect(locator).toBeVisible();

Script pour cliquer sur une checkbox :

Voici les lignes pour faire une programmation : 


const target = await page.getByTestId('refining-destinations-checkbox-0-input');
await expect(target).toBeVisible({ timeout: stepTimeout });
//await target.scrollIntoViewIfNeeded();
//await target.hover({ force: true });
await target.click({ force: true });
await page.waitForTimeout(500);

Cliquer sur le 1er data-testid "header-sub-port" visible

const dep = page.getByTestId('header-sub-port').filter({ visible: true }).first();

await expect(dep).toBeVisible();

await dep.click();

Construire un selector dynamique

const destination = '/d-341';

const selector = `[data-testid="header-sub-dest"][href*="${destination}"]`;

await page.locator(selector).click();

Déclaration d'une variable :

let selector = '';

if (isMaritime) {
  selector = '[data-testid="header-sub-maritime-dest"][href*="/d-341"]';
} else {
  selector = '[data-testid="header-sub-dest"][href*="/d-341"]';
}

Vérification de l'existance d'un data-testid :

await expect(page.getByTestId('v2')).toBeVisible();

Charger une page avec une URL spécifique :

await page.goto(myUrlCompagny);
await page.waitForLoadState('networkidle');

Scroller au footer :

const footer = page.locator('footer');

await footer.scrollIntoViewIfNeeded();
await expect(footer).toBeVisible();

Attente d'un laps de temps :

await page.waitForTimeout(10000);

Comment accéder au 2 datatest-id dans le DOM

const locator = page.locator('[data-testid]').nth(1);

Important : index commence à 0

  • nth(0) → 1er élément
  • nth(1) → 2ᵉ élément
  • nth(2) → 3ᵉ élément

Seulement parmi les visibles

await page.locator('[data-testid]')
  .filter({ visible: true })
  .nth(1)
  .click();

Vérifier combien existent

const count = await page.locator('[data-testid]').count();
console.log(count);

Voir le HTML du 2ᵉ élément

​​​​​​​console.log(
  await page.locator('[data-testid]').nth(1)
    .evaluate(el => el.outerHTML)
);

Comment aller au 1er data-testid visible :

const locator = page.getByTestId('v2')
  .filter({ visible: true })
  .first();

await locator.scrollIntoViewIfNeeded();

Attendre qu'il apparaisse :

const locator = page.getByTestId('v2')
  .filter({ visible: true })
  .first();

await expect(locator).toBeVisible();
await locator.scrollIntoViewIfNeeded();

Evaluate :

evaluate() est donc essentiellement le moyen de dire à Playwright : « exécute ce petit bout de JavaScript sur cet élément du DOM et donne-moi le résultat ».

const element = page.locator('[data-testid]').nth(1);

console.log(
  await element.evaluate(el => el.outerHTML)
);

est équivalent à :

const testId = await element.getAttribute('data-testid'); console.log(testId);

Vérifier que l'accordéon est fermé puis ouvert :

const content = page.getByTestId('accordion-content');

await expect(content).toBeHidden();

await page.getByTestId('accordion').click();

await expect(content).toBeVisible();

Tuto sur Playwright

  1. mkdir tuto-playwright pour créer le répertoire
  2. cd tuto-playwright/
  3. pnpm init permet d'instancier Playwright et de créer les fichiers json
  4. pnpm  add -D @playwright/test installe Playwright dans le répertoire
  5. pnpm playwright install permet d'installer les dépendances
  6. pnpm playwight test permet de lancer les tests
  7. mkdir tests Il faut que le répertoire soit nommé ainsi !
  8. créer un fichier test/playwright.spec.js qui contiendra les tests. Attention, il faut que le test aie le suffixe .spec.js


Si Playwright ne fonctionne pas :

  • pnpm remove playwright
  • pnpm install
  • pnpm dedupe