tests(e2e): improve login util stability

.github/workflows/tests.yml

@@ -174,7 +174,7 @@ jobs:
  uses: ./.github/actions/yarn-nm-install
 
  - name: Install Playwright Browsers
- run: npx playwright@1.42.1 install --with-deps
+ run: npx playwright@1.43.1 install --with-deps
 
  - name: Monorepo build
  uses: ./.github/actions/run-build
@@ -216,7 +216,7 @@ jobs:
  uses: ./.github/actions/yarn-nm-install
 
  - name: Install Playwright Browsers
- run: npx playwright@1.42.1 install --with-deps
+ run: npx playwright@1.43.1 install --with-deps
 
  - name: Monorepo build
  uses: ./.github/actions/run-build

package.json

@@ -84,7 +84,7 @@
  "@commitlint/cli": "19.2.0",
  "@commitlint/config-conventional": "19.1.0",
  "@commitlint/prompt-cli": "19.2.0",
- "@playwright/test": "1.42.1",
+ "@playwright/test": "1.43.1",
  "@strapi/admin-test-utils": "workspace:*",
  "@strapi/eslint-config": "0.2.0",
  "@swc/cli": "0.3.10",

tests/e2e/constants.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const { CUSTOM_TRANSFER_TOKEN_ACCESS_KEY } = require('./app-template/template/src/constants');
 
 // NOTE: anything included here needs to be included in all test datasets exports
@@ -41,9 +43,17 @@ const ALLOWED_CONTENT_TYPES = [
 const ADMIN_EMAIL_ADDRESS = '[email protected]';
 const ADMIN_PASSWORD = 'Testing123!';
 
+const TITLE_LOGIN = 'Strapi Admin';
+const TITLE_HOME = 'Homepage | Strapi';
+
+const URL_ROOT = '/admin';
+
 module.exports = {
  ADMIN_EMAIL_ADDRESS,
  ADMIN_PASSWORD,
  ALLOWED_CONTENT_TYPES,
  CUSTOM_TRANSFER_TOKEN_ACCESS_KEY,
+ TITLE_LOGIN,
+ TITLE_HOME,
+ URL_ROOT,
 };

tests/e2e/tests/admin/api-tokens.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 import { login } from '../../utils/login';
 import { navToHeader } from '../../utils/shared';
 import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
@@ -22,12 +22,19 @@ const createAPIToken = async (page, tokenName, duration, type) => {
 };
 
 test.describe('API Tokens', () => {
- test.beforeEach(async ({ page }) => {
+ let page: Page;
+
+ // For some reason, logging in after each token is extremely flaky, so we'll just do it once
+ test.beforeAll(async ({ browser }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
+ page = await browser.newPage();
  await login({ page });
  });
 
+ test.afterAll(async ({ browser }) => {
+ page.close();
+ });
+
  // Test token creation
  const testCases = [
  ['30-day Read-only token', '30 days', 'Read-only'],
@@ -37,16 +44,25 @@ test.describe('API Tokens', () => {
  ['unlimited token', 'Unlimited', 'Full access'],
  ];
  for (const [name, duration, type] of testCases) {
- test(`A user should be able to create a ${name}`, async ({ page }) => {
+ test(`A user should be able to create a ${name}`, async ({}) => {
  await createAPIToken(page, name, duration, type);
  });
  }
 
- test('Created tokens list page should be correct', async ({ page }) => {
+ test('Created tokens list page should be correct', async ({}) => {
  await createAPIToken(page, 'my test token', 'unlimited', 'Full access');
+
+ // if we don't wait until createdAt is at least 1s, we see "NaN" for the timestamp
+ // TODO: fix the bug and remove this
+ await page.waitForTimeout(1100);
+
  await navToHeader(page, ['Settings', 'API Tokens'], 'API Tokens');
 
- const row = page.getByRole('gridcell', { name: 'my test token', exact: true });
- await expect(row).toBeVisible();
+ const nameCell = page.getByRole('gridcell', { name: 'my test token', exact: true });
+ await expect(nameCell).toBeVisible();
+
+ // Locate the parent of nameCell and then search within it for the timestamp
+ const parentRow = nameCell.locator('xpath=..');
+ await expect(parentRow).toContainText(/\d+ (second|minute)s? ago/);
  });
 });

tests/e2e/tests/admin/login.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
 import { toggleRateLimiting } from '../../utils/rate-limit';
-import { ADMIN_EMAIL_ADDRESS, ADMIN_PASSWORD } from '../../constants';
+import { ADMIN_EMAIL_ADDRESS, ADMIN_PASSWORD, TITLE_HOME, TITLE_LOGIN } from '../../constants';
 import { login } from '../../utils/login';
 
 test.describe('Login', () => {
@@ -14,26 +14,33 @@ test.describe('Login', () => {
  test('A user should be able to log in with or without making their authentication persistent', async ({
  page,
  context,
+ browser,
  }) => {
  // Test without making user authentication persistent
  await login({ page });
- await expect(page).toHaveTitle('Homepage | Strapi');
+ await expect(page).toHaveTitle(TITLE_HOME);
 
+ // Close the page and open a new one
  await page.close();
-
- page = await context.newPage();
- await page.goto('/admin');
- await expect(page).toHaveTitle('Strapi Admin');
+ const nonPersistentPage = await context.newPage();
+ await Promise.all([
+ nonPersistentPage.waitForLoadState('networkidle'),
+ nonPersistentPage.goto('/admin'),
+ ]);
+ await expect(nonPersistentPage).toHaveTitle(TITLE_LOGIN);
 
  // Test with making user authentication persistent
- await login({ page, rememberMe: true });
- await expect(page).toHaveTitle('Homepage | Strapi');
-
- await page.close();
-
- page = await context.newPage();
- await page.goto('/admin');
- await expect(page).toHaveTitle('Homepage | Strapi');
+ await login({ page: nonPersistentPage, rememberMe: true });
+ await expect(nonPersistentPage).toHaveTitle(TITLE_HOME);
+
+ // Close the page and open a new one
+ await nonPersistentPage.close();
+ const persistentPage = await context.newPage();
+ await Promise.all([
+ persistentPage.waitForLoadState('networkidle'),
+ persistentPage.goto('/admin'),
+ ]);
+ await expect(persistentPage).toHaveTitle(TITLE_HOME);
  });
  });
 

tests/e2e/tests/admin/logout.spec.ts

@@ -6,7 +6,6 @@ import { login } from '../../utils/login';
 test.describe('Log Out', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/admin/signup.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
-import { ADMIN_EMAIL_ADDRESS, ADMIN_PASSWORD } from '../../constants';
+import { ADMIN_EMAIL_ADDRESS, ADMIN_PASSWORD, TITLE_HOME } from '../../constants';
 
 /**
  * Fill in the sign up form with valid values
@@ -28,7 +28,7 @@ test.describe('Sign Up', () => {
  await resetDatabaseAndImportDataFromPath('without-admin.tar', (cts) =>
  cts.filter((ct) => ct !== 'plugin::i18n.locale')
  );
- await page.goto('/admin');
+ await page.goto('/admin', { waitUntil: 'networkidle' });
  await fillValidSignUpForm({ page });
  });
 
@@ -96,8 +96,11 @@ test.describe('Sign Up', () => {
  test('a user should be able to signup when the strapi instance starts fresh', async ({
  page,
  }) => {
- await page.getByRole('button', { name: "Let's start" }).click();
+ await Promise.all([
+ page.waitForLoadState('networkidle'),
+ page.getByRole('button', { name: "Let's start" }).click(),
+ ]);
 
- await expect(page).toHaveTitle('Homepage | Strapi');
+ await expect(page).toHaveTitle(TITLE_HOME);
  });
 });

tests/e2e/tests/admin/transfer-tokens.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 import { login } from '../../utils/login';
 import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
 import { navToHeader } from '../../utils/shared';
@@ -26,12 +26,19 @@ const createTransferToken = async (page, tokenName, duration, type) => {
 };
 
 test.describe('Transfer Tokens', () => {
- test.beforeEach(async ({ page }) => {
+ let page: Page;
+
+ // For some reason, logging in after each token is extremely flaky, so we'll just do it once
+ test.beforeAll(async ({ browser }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
+ page = await browser.newPage();
  await login({ page });
  });
 
+ test.afterAll(async ({ browser }) => {
+ page.close();
+ });
+
  // Test token creation
  const testCases = [
  ['30-day push token', '30 days', 'Push'],
@@ -43,12 +50,12 @@ test.describe('Transfer Tokens', () => {
  ['unlimited token', 'Unlimited', 'Full access'],
  ];
  for (const [name, duration, type] of testCases) {
- test(`A user should be able to create a ${name}`, async ({ page }) => {
+ test(`A user should be able to create a ${name}`, async ({}) => {
  await createTransferToken(page, name, duration, type);
  });
  }
 
- test('Created tokens list page should be correct', async ({ page }) => {
+ test('Created tokens list page should be correct', async ({}) => {
  await createTransferToken(page, 'my test token', 'unlimited', 'Full access');
 
  // if we don't wait until createdAt is at least 1s, we see "NaN" for the timestamp
@@ -57,9 +64,13 @@ test.describe('Transfer Tokens', () => {
 
  await navToHeader(page, ['Settings', 'Transfer Tokens'], 'Transfer Tokens');
 
- const row = page.getByRole('gridcell', { name: 'my test token', exact: true });
- await expect(row).toBeVisible();
- await expect(page.getByText(/\d+ (second|minute)s? ago/)).toBeVisible();
+ const nameCell = page.getByRole('gridcell', { name: 'my test token', exact: true });
+ await expect(nameCell).toBeVisible();
+
+ // Locate the parent of nameCell and then search within it for the timestamp
+ const parentRow = nameCell.locator('xpath=..');
+ await expect(parentRow).toContainText(/\d+ (second|minute)s? ago/);
+
  // TODO: expand on this test, it could check edit and delete icons
  });
 });

tests/e2e/tests/content-manager/cloning.spec.ts

@@ -6,7 +6,6 @@ import { findAndClose } from '../../utils/shared';
 test.describe('Cloning', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/content-manager/editview.spec.ts

@@ -6,7 +6,6 @@ import { findAndClose } from '../../utils/shared';
 test.describe('Edit View', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/content-manager/listview.spec.ts

@@ -5,7 +5,6 @@ import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
 test.describe('List View', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/content-manager/uniqueness.spec.ts

@@ -14,8 +14,6 @@ test.describe('Uniqueness', () => {
  test.beforeEach(async ({ page }) => {
  // Reset the DB and also specify that we are wiping all entries of the unique content type each time
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
-
- await page.goto('/admin');
  await login({ page });
 
  await page.getByRole('link', { name: 'Content Manager' }).click();

tests/e2e/tests/content-releases/release-details-page.spec.ts

@@ -33,7 +33,6 @@ const addEntryToRelease = async ({ page, releaseName }: { page: Page; releaseNam
 describeOnCondition(/*edition === 'EE'*/ false)('Release page', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
 
  await page.getByRole('link', { name: 'Releases' }).click();

tests/e2e/tests/content-releases/releases-page.spec.ts

@@ -8,7 +8,6 @@ const edition = process.env.STRAPI_DISABLE_EE === 'true' ? 'CE' : 'EE';
 describeOnCondition(edition === 'EE')('Releases page', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/content-type-builder/collection-type/create-collection-type.spec.ts

@@ -8,7 +8,6 @@ test.describe('Create collection type', () => {
  test.beforeEach(async ({ page }) => {
  await resetFiles();
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
 
  await page.getByRole('link', { name: 'Content-Type Builder' }).click();

tests/e2e/tests/content-type-builder/ctb-edit-view.spec.ts

@@ -6,7 +6,6 @@ import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
 test.describe('Edit View CTB', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/content-type-builder/tutorial.spec.ts

@@ -5,7 +5,6 @@ import { resetDatabaseAndImportDataFromPath } from '../../utils/dts-import';
 test.describe('Tutorial', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/i18n/editview.spec.ts

@@ -6,7 +6,6 @@ import { findAndClose } from '../../utils/shared';
 test.describe('Edit view', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/i18n/listview.spec.ts

@@ -5,7 +5,6 @@ import { login } from '../../utils/login';
 test.describe('List view', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/i18n/settings.spec.ts

@@ -8,7 +8,6 @@ test.describe('Settings', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
  await prunePermissions(page);
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/review-workflows/content-manager.spec.ts

@@ -8,7 +8,6 @@ const edition = process.env.STRAPI_DISABLE_EE === 'true' ? 'CE' : 'EE';
 describeOnCondition(edition === 'EE')('content-manager', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });
 

tests/e2e/tests/review-workflows/settings.spec.ts

@@ -8,7 +8,6 @@ const edition = process.env.STRAPI_DISABLE_EE === 'true' ? 'CE' : 'EE';
 describeOnCondition(edition === 'EE')('settings', () => {
  test.beforeEach(async ({ page }) => {
  await resetDatabaseAndImportDataFromPath('with-admin.tar');
- await page.goto('/admin');
  await login({ page });
  });