Migrate initial Protractor e2e specs to Playwright

e2e/MIGRATION_REPORT.md

@@ -0,0 +1,37 @@
+# E2E consolidation on Playwright — migration report
+
+## Frameworks found in this repo
+- Protractor (count: 30)
+
+## Totals
+- Original non-Playwright specs: 30
+- Migrated: 4
+- Blocked: 1 (see below)
+- Obsolete: 0 (see below)
+- Flaky: 0 (see below)
+- Redundant: 0 (see below)
+
+## Migrated specs
+- Protractor `e2e/client/specs/workspace_spec.ts` -> `e2e/client/playwright/workspace.spec.ts` [65a6ef935] — Given the authenticated user is on the dashboard, when they use the workspace hotkeys, then the app switches to monitoring, spiked, personal, search, and back to dashboard.
+- Protractor `e2e/client/specs/vocabularies_spec.ts` -> `e2e/client/playwright/vocabularies.spec.ts` [4b719937a] — Given the vocabularies settings page is open, when the user edits the Categories vocabulary name and cancels, then the original vocabulary data is restored.
+- Protractor `e2e/client/specs/subscribers_spec.ts` -> `e2e/client/playwright/subscribers.spec.ts` [a50a98854] — Given the publish settings page is open, when the user inspects and edits the default subscriber row from the snapshot, then the list shows that subscriber and the save button only enables after changing the target type and destination format.
+- Protractor `e2e/client/specs/suggest_spec.ts` -> `e2e/client/playwright/suggest.spec.ts` [df73cc578] — Given an authenticated user opens a new text item, when they open Live suggestions before changing the body, then the suggestions list is empty.
+
+## Blocked
+- Protractor `e2e/client/specs/notifications_spec.ts` — create a user mention and verify the mentioned user's unread badge clears after sign-in — current `main` snapshot no longer accepts the legacy `admin1` / `admin` credentials used by the spec, so migrating this scenario needs a maintained secondary-user test fixture or snapshot update.
+
+## Obsolete
+- None yet.
+
+## Flaky
+- None yet.
+
+## Redundant
+- None yet.
+
+## Product source changes
+- `scripts/apps/publish/views/subscribers.html` — `data-test-id` added to subscriber list rows — for `e2e/client/playwright/subscribers.spec.ts`
+- `scripts/apps/authoring/suggest/SuggestView.html` — `data-test-id` added to the live suggestions list and items — for `e2e/client/playwright/suggest.spec.ts`
+
+## Frameworks removed
+- None yet.

e2e/client/playwright/subscribers.spec.ts

@@ -0,0 +1,33 @@
+import {test, expect} from '@playwright/test';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test.describe('subscribers', () => {
+    test.beforeEach(async ({page}) => {
+        await restoreDatabaseSnapshot();
+        await page.goto('/#/settings/publish');
+    });
+
+    test('lists the default subscriber', async ({page}) => {
+        const subscriberItems = page.locator(s('subscriber-item'));
+
+        await expect(subscriberItems).toHaveCount(1);
+        await expect(subscriberItems.first()).toBeVisible();
+    });
+
+    test('save button is disabled until subscriber type changes', async ({page}) => {
+        const subscriberItem = page.locator(s('subscriber-item')).first();
+
+        await subscriberItem.click();
+        await subscriberItem.locator(s('edit-subscriber-button')).click();
+
+        const saveButton = page.getByRole('button', {name: 'Save'});
+
+        await expect(saveButton).toBeDisabled();
+
+        await page.locator('#subType').selectOption('string:wire');
+        await page.locator('#destination-format').selectOption('nitf');
+
+        await expect(saveButton).toBeEnabled();
+        await page.getByRole('button', {name: 'Cancel'}).click();
+    });
+});

e2e/client/playwright/suggest.spec.ts

@@ -0,0 +1,19 @@
+import {test, expect} from '@playwright/test';
+import {Monitoring} from './page-object-models/monitoring';
+import {Authoring} from './page-object-models/authoring';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test('live suggestions opens with no items', async ({page}) => {
+    const monitoring = new Monitoring(page);
+    const authoring = new Authoring(page);
+
+    await restoreDatabaseSnapshot();
+    await page.goto('/#/workspace/monitoring');
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await monitoring.createArticleFromTemplate('story');
+    await authoring.executeActionInEditor('Live suggestions');
+
+    await expect(page.locator(s('live-suggestions'))).toBeVisible();
+    await expect(page.locator(s('live-suggestions', 'suggestion-item'))).toHaveCount(0);
+});

e2e/client/playwright/vocabularies.spec.ts

@@ -0,0 +1,25 @@
+import {test, expect} from '@playwright/test';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test('can restore vocabulary data when editing is cancelled', async ({page}) => {
+    const originalName = 'Categories';
+    const updatedName = 'Categories test';
+    const originalVocabularyItemSelector = s('metadata-content', `vocabulary-item=${originalName}`);
+
+    await restoreDatabaseSnapshot();
+    await page.goto('/#/settings/vocabularies');
+
+    const vocabularyItem = page.locator(originalVocabularyItemSelector);
+
+    await expect(vocabularyItem).toBeVisible();
+    await vocabularyItem.hover();
+    await vocabularyItem.locator(s('vocabulary-item--start-editing')).click();
+
+    await page.locator(s('vocabulary-edit-field--name')).fill(updatedName);
+    await expect(page.locator(s('vocabulary-edit-field--name'))).toHaveValue(updatedName);
+
+    await page.locator(s('vocabulary-edit-modal--cancel')).click();
+    await expect(
+        page.locator(originalVocabularyItemSelector).locator(s('vocabulary-item--name')),
+    ).toHaveText(originalName);
+});

e2e/client/playwright/workspace.spec.ts

@@ -0,0 +1,24 @@
+import {test, expect} from '@playwright/test';
+import {restoreDatabaseSnapshot, s} from './utils';
+
+test('can switch views by keyboard', async ({page}) => {
+    await restoreDatabaseSnapshot();
+    await page.goto('/#/workspace');
+
+    await expect(page.locator(s('dashboard'))).toBeVisible();
+
+    await page.keyboard.press('Alt+m');
+    await expect(page).toHaveURL(/.*\/#\/workspace\/monitoring/);
+
+    await page.keyboard.press('Control+Alt+k');
+    await expect(page).toHaveURL(/.*\/#\/workspace\/spike-monitoring/);
+
+    await page.keyboard.press('Alt+p');
+    await expect(page).toHaveURL(/.*\/#\/workspace\/personal/);
+
+    await page.keyboard.press('Control+Alt+f');
+    await expect(page).toHaveURL(/.*\/#\/search/);
+
+    await page.keyboard.press('Control+Alt+b');
+    await expect(page).toHaveURL(/.*\/#\/workspace$/);
+});

scripts/apps/authoring/suggest/SuggestView.html

@@ -1,13 +1,13 @@
-<div class="live-suggest">
+<div class="live-suggest" data-test-id="live-suggestions">
 	<div ng-show="showItem === null" class="item-list">
 		<div class="live-suggest__header subnav">
 			<h3 class="subnav__page-title" translate>Live Suggestions</h3>
 			<a class="close" ng-click="ctrl.close()"><i class="icon-close-small"></i></a>
 		</div>
 		<div class="live-suggest__body">
 			<h6 class="no-suggestions" ng-hide="items" translate>Suggestions will appear here once the article's body starts changing...</h6>
-			<ul sd-list-view class="list-view compact-view" data-items="items" ng-show="items">
-				<li class="media-box" ng-click="ctrl.showItem(item)">
+			<ul sd-list-view class="list-view compact-view" data-items="items" ng-show="items" data-test-id="suggestions-list">
+				<li class="media-box" ng-click="ctrl.showItem(item)" data-test-id="suggestion-item">
 					<div class="line item-info">
 						<i sd-filetype-icon data-item="item"></i>
 						<span class="keyword">{{ item.slugline || '-' }}</span>

scripts/apps/publish/views/subscribers.html

@@ -29,7 +29,12 @@
 
     <div class="sd-page__content">
         <ul class="sd-list-item-group sd-list-item-group--space-between-items" style="max-width: 1000px;">
-            <li ng-repeat="subscriber in subscribers | subscribersBy:search as filtered_subscribers track by subscriber._id" class="sd-list-item sd-shadow--z1">
+            <li
+                ng-repeat="subscriber in subscribers | subscribersBy:search as filtered_subscribers track by subscriber._id"
+                class="sd-list-item sd-shadow--z1"
+                data-test-id="subscriber-item"
+                data-test-value="{{ subscriber.name }}"
+            >
                 <div class="sd-list-item__border"></div>
                 <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
                     <div class="sd-list-item__row">