Improve Playwright tests (#168)

* Added new test that navigates between pages by changing the URL and edits them. One of the pages has a sheet the other has text (covers 3 of the 4 items on https://github.com/adobe/da-live/wiki/TODO-%E2%80%90-Playwright-tests ) * Support for running the tests against a locally running da-collab and da-admin (triggered by setting the env var GITHUB_HEAD_REF=local which now also selects these locally via query param) * Updated the regionaledit test to run in its own unique directory to allow multi browser tests to run concurrently without tripping over each other
adobe · May 30, 2024 · da40850 · da40850
1 parent 658dcc0
commit da40850
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 54 deletions.
diff --git a/test/e2e/tests/delete.spec.js b/test/e2e/tests/delete.spec.js
@@ -22,7 +22,7 @@ test('Delete multiple old pages', async ({ page }, workerInfo) => {
     return;
   }
 
-  test.setTimeout(40000);
+  test.setTimeout(80000);
 
   // Open the directory listing
   await page.goto(`${ENV}/#/da-sites/da-status/tests`);
@@ -57,7 +57,7 @@ test('Delete multiple old pages', async ({ page }, workerInfo) => {
 
     // If we're here the page has to be deleted. We'll tick the checkbox next to it in the page
     const checkbox = page.locator('li').filter({ hasText: fileName }).locator('input[type="checkbox"][name="item-selected"]');
-    console.log('checkboxes:', await checkbox.count());
+    console.log('To be deleted, checked box:', await checkbox.count());
     await checkbox.focus();
     await page.keyboard.press(' ');
     itemsToDelete = true;
@@ -72,5 +72,5 @@ test('Delete multiple old pages', async ({ page }, workerInfo) => {
   await page.getByRole('button', { name: 'Delete' }).click();
 
   // Wait for the delete button to disappear which is when we're done
-  await expect(page.getByRole('button', { name: 'Delete' })).not.toBeVisible({ timeout: 30000 });
+  await expect(page.getByRole('button', { name: 'Delete' })).not.toBeVisible({ timeout: 60000 });
 });
diff --git a/test/e2e/tests/edit.spec.js b/test/e2e/tests/edit.spec.js
@@ -23,8 +23,7 @@ test('Update Document', async ({ browser, page }, workerInfo) => {
   const enteredText = `[${workerInfo.project.name}] Edited by test ${new Date()}`;
   await page.locator('div.ProseMirror').fill(enteredText);
 
-  // Wait 3 secs
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(1000);
   await page.close();
 
   const newPage = await browser.newPage();
@@ -47,12 +46,12 @@ test('Create Delete Document', async ({ browser, page }, workerInfo) => {
   await page.locator('button:text("Create document")').click();
   await expect(page.locator('div.ProseMirror')).toBeVisible();
   await page.locator('div.ProseMirror').fill('testcontent');
+  await page.waitForTimeout(1000);
 
   const newPage = await browser.newPage();
   await newPage.goto(`${ENV}/#/da-sites/da-status/tests`);
 
-  // Wait 1 sec
-  await newPage.waitForTimeout(4000);
+  await newPage.waitForTimeout(3000);
   await newPage.reload();
 
   await expect(newPage.locator(`a[href="/edit#/da-sites/da-status/tests/${pageName}"]`)).toBeVisible();
@@ -68,3 +67,46 @@ test('Create Delete Document', async ({ browser, page }, workerInfo) => {
   await page.waitForTimeout(1000);
   await expect(newPage.locator(`a[href="/edit#/da-sites/da-status/tests/${pageName}"]`)).not.toBeVisible();
 });
+
+test('Change document by switching anchors', async ({ page }, workerInfo) => {
+  test.setTimeout(15000);
+
+  const url = getTestPageURL('edit3', workerInfo);
+  const urlA = `${url}A`;
+  const urlB = `${url}B`;
+
+  await page.goto(urlA);
+  await expect(page.locator('div.ProseMirror')).toBeVisible();
+
+  await page.locator('div.ProseMirror').fill('before table');
+  await page.getByText('Block', { exact: true }).click();
+  await page.getByText('columns').fill('mytable');
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('k');
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('v');
+  await page.getByText('Edit Block').click();
+  await page.getByText('Insert row after').click();
+  await page.keyboard.press('Tab');
+  await page.keyboard.type('k 2');
+  await page.keyboard.press('Tab');
+  await page.keyboard.type('v 2');
+
+  await page.waitForTimeout(1000);
+
+  await page.goto(urlB);
+  await expect(page.locator('div.ProseMirror')).toBeVisible();
+
+  await page.locator('div.ProseMirror').fill('page B');
+  await page.waitForTimeout(1000);
+
+  await page.goto(urlA);
+  await expect(page.locator('div.ProseMirror')).toBeVisible();
+  await expect(page.locator('div.ProseMirror')).toContainText('mytable');
+  await expect(page.locator('div.ProseMirror')).toContainText('k 2');
+  await expect(page.locator('div.ProseMirror')).toContainText('v 2');
+
+  await page.goto(urlB);
+  await expect(page.locator('div.ProseMirror')).toBeVisible();
+  await expect(page.locator('div.ProseMirror')).toContainText('page B');
+});
diff --git a/test/e2e/tests/regionaledits.spec.js b/test/e2e/tests/regionaledits.spec.js
@@ -1,50 +1,42 @@
 import { test, expect } from '@playwright/test';
 import path from 'path';
-import ENV from '../utils/env.js';
+import { getTestFolderURL } from '../utils/page.js';
 
-const deleteTestPage = async () => {
-  // Delete the document even if the test fails;
-  const pageName = 'regionaledit.html';
-  const adminURL = `https://admin.da.live/source/da-sites/da-status/tests/${pageName}`;
-  await fetch(adminURL, { method: 'DELETE' });
-};
-
-test('Regional Edit Document', async ({ page }) => {
+test('Regional Edit Document', async ({ page }, workerInfo) => {
   test.setTimeout(15000);
-  await deleteTestPage();
-
-  try {
-    await page.goto(`${ENV}/#/da-sites/da-status/tests`);
-    await page.getByRole('button', { name: 'New' }).click();
-    await page.getByRole('button', { name: 'Media' }).click();
-
-    const [fileChooser] = await Promise.all([
-      page.waitForEvent('filechooser'),
-      page.getByText('Select file').click(),
-    ]);
-
-    const htmlFile = path.join(__dirname, '/mocks/regionaledit.html');
-    console.log(htmlFile);
-    await fileChooser.setFiles([`${htmlFile}`]);
-
-    await page.getByRole('button', { name: 'Upload' }).click();
-    await page.getByRole('link', { name: 'regionaledit' }).click();
-
-    await expect(page.locator('div.loc-color-overlay.loc-langstore')).toBeVisible();
-    await expect(page.locator('div.loc-color-overlay.loc-regional')).toBeVisible();
-
-    expect(page.getByText('Deleted H1 Here', { exact: true })).toBeVisible();
-    expect(page.getByText('Added H1 Here', { exact: true })).toBeVisible();
-
-    await page.locator('div.loc-color-overlay.loc-langstore').hover();
-    await page.locator('da-loc-deleted').getByText('Delete', { exact: true }).click();
-    await expect(page.getByText('Deleted H1 Here', { exact: true })).not.toBeVisible();
-
-    await page.locator('div.loc-color-overlay.loc-regional').hover();
-    await page.locator('da-loc-added').getByText('Keep', { exact: true }).click();
-    await expect(page.getByText('Added H1 Here', { exact: true })).toBeVisible();
-    await expect(page.locator('div.loc-color-overlay.loc-regional')).not.toBeVisible();
-  } finally {
-    deleteTestPage();
-  }
+
+  const folderURL = getTestFolderURL('regionaledit', workerInfo);
+  await page.goto(folderURL);
+  await page.getByRole('button', { name: 'New' }).click();
+  await page.getByRole('button', { name: 'Media' }).click();
+
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.getByText('Select file').click(),
+  ]);
+
+  const htmlFile = path.join(__dirname, '/mocks/regionaledit.html');
+  console.log(htmlFile);
+  await fileChooser.setFiles([`${htmlFile}`]);
+
+  await page.getByRole('button', { name: 'Upload' }).click();
+  await page.getByRole('link', { name: 'regionaledit', exact: true }).click();
+
+  await expect(page.locator('div.loc-color-overlay.loc-langstore')).toBeVisible();
+  await expect(page.locator('div.loc-color-overlay.loc-regional')).toBeVisible();
+
+  expect(page.getByText('Deleted H1 Here', { exact: true })).toBeVisible();
+  expect(page.getByText('Added H1 Here', { exact: true })).toBeVisible();
+
+  await page.locator('div.loc-color-overlay.loc-langstore').hover();
+  await page.locator('da-loc-deleted').getByText('Delete', { exact: true }).click();
+  await expect(page.getByText('Deleted H1 Here', { exact: true })).not.toBeVisible();
+
+  await page.locator('div.loc-color-overlay.loc-regional').hover();
+  await page.locator('da-loc-added').getByText('Keep', { exact: true }).click();
+  await expect(page.getByText('Added H1 Here', { exact: true })).toBeVisible();
+  await expect(page.locator('div.loc-color-overlay.loc-regional')).not.toBeVisible();
+
+  // Note that the test folder will be automatically cleaned up in subsequent runs
+  // by the delete.spec.js test
 });
diff --git a/test/e2e/tests/versions.spec.js b/test/e2e/tests/versions.spec.js
@@ -60,7 +60,7 @@ test('Create Version and Restore from it', async ({ page }, workerInfo) => {
 
   // Select 'ver 1' and restore it
   await page.getByText('ver 1', { exact: false }).click();
-  await page.getByRole('button', { name: 'Restore' }).click();
+  await page.locator('li').filter({ hasText: 'ver 1' }).getByRole('button').click();
   await page.locator('div.da-version-action-area').getByText('Restore').click();
 
   // Ensure that the original text is still there

diff --git a/test/e2e/utils/page.js b/test/e2e/utils/page.js
@@ -11,10 +11,20 @@
  */
 import ENV from './env.js';
 
+function getQuery() {
+  const { GITHUB_HEAD_REF: branch } = process.env;
+  if (branch === 'local') {
+    return '?da-admin=local&da-collab=local';
+  }
+  return '';
+}
+
+const QUERY = getQuery();
+
 function getTestURL(type, testIdentifier, workerInfo) {
   const dateStamp = Date.now().toString(36);
   const pageName = `pw-${testIdentifier}-${dateStamp}-${workerInfo.project.name}`;
-  return `${ENV}/${type}#/da-sites/da-status/tests/${pageName}`;
+  return `${ENV}/${type}${QUERY}#/da-sites/da-status/tests/${pageName}`;
 }
 
 /**
@@ -28,6 +38,17 @@ export function getTestPageURL(testIdentifier, workerInfo) {
   return getTestURL('edit', testIdentifier, workerInfo);
 }
 
+/**
+ * Returns a URL for a single-use test folder.
+ *
+ * @param {string} testIdentifier - A identifier for the test
+ * @param {object} workerInfo - workerInfo as passed in by Playwright
+ * @returns {string} The URL for the test page.
+ */
+export function getTestFolderURL(testIdentifier, workerInfo) {
+  return getTestURL('', testIdentifier, workerInfo);
+}
+
 /**
  * Returns a URL for a single-use test sheet.
  *