Démarrer le serveur automatiquement et URL de base

Vous avez remarqué que pour le moment, afin d'exécuter les tests, on démarre premièrement le serveur. En temps normal, exécuter des tests devrait pouvoir se faire de façon automatisée à l'aide d'une commande sans intervention manuelle supplémentaire.

Dans le fichier playwright.config.ts, vous pouvez enlever les commentaires à la toute fin sur la section webServer et remplacer par:

playwright.config.ts
  //...

  /* Run your local dev server before starting the tests */
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI, // Ne pas démarrer si route déjà
    timeout: 120 * 1000, // 2 minutes pour s'assurer que Angular a le temps de compiler
  },
});

Vous pouvez relancer les tests Playwright, cela devrait être un peu plus long au début le temps de lancer le serveur Angular et les tests devraient s'exécuter normalement ensuite.

Configurer l'URL de base

Dans les tests, on utilise ceci comme URL de base angular: http://localhost:4200. Or, on la répète à de multiples endroits. Il est possible de configurer cette adresse de base dans Playwright et de simplement spécifier l'URL relative!

playwright.config.ts
//...

  use: {
    /* Base URL to use in actions like `await page.goto('')`. */
    baseURL: 'http://localhost:4200',

//...

Ensuite, dans les tests, on peut simplement utiliser l'URL relative!

tests/projets.spec.ts
test.describe('Tests des projets', () => {
  test.beforeEach(async ({ page }) => {
    // Un jeton JWT valide
    const jwtToken = await generateTestToken();

    // Ajout du jeton au localStorage
    await page.addInitScript((token) => {
      localStorage.setItem('access_token', token);
    }, jwtToken);
  });

  test('la page projets est affichée', async ({ page }) => {
    await page.goto('/projets');

    await expect(page.locator('h1')).toContainText('Projets');
  });

  test('une liste de projets est affichée', async ({ page }) => {
    await page.route('http://localhost:3000/projets', (route) => {
      route.fulfill({
        json: mockProjets,
      });
    });

    await page.goto('/projets');
    await expect(page.locator('ul.list-group li')).toHaveCount(mockProjets.length);
  })
});

Configurer l'URL de base​

Configurer l'URL de base