test(slb-277): creating quick-actions.ts to allow for reusable steps

tests/e2e/helpers/quick-actions.ts

@@ -0,0 +1,23 @@
+import { type Page } from '@playwright/test';
+
+export enum SiteLanguage {
+  English = 'English',
+  Deutsch = 'Deutsch',
+}
+
+export class QuickActions {
+  private page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async changeLanguageTo(language: SiteLanguage): Promise<void> {
+    // Open the language switcher.
+    await this.page
+      .locator("(//button[contains(@aria-haspopup, 'menu')])[1]")
+      .click();
+    // look for the language and click on it.
+    await this.page.locator("//a[contains(text(),'" + language + "')]").click();
+  }
+}

tests/e2e/specs/decap/decap-pages.spec.ts

@@ -1,9 +1,12 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('decap pages', () => {
   test('example decap page is rendered', async ({ page }) => {
+    const quickActions = new QuickActions(page);
+
     await page.goto(websiteUrl('/en/decap-example'));
     const content = page.getByRole('main');
     await expect(
@@ -13,10 +16,8 @@ test.describe('decap pages', () => {
       content.getByText('This page was created with Decap CMS'),
     ).toBeVisible();
 
-    // Open the language switcher and click on the German language
-    await page.getByRole('button', { name: 'English' }).click();
-    // Think 'getByRole' does not work as item gets removed from the DOM.
-    await page.locator("//a[contains(text(),'Deutsch')]").click();
+    // Change language to German.
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
 
     await expect(
       content.getByRole('heading', { name: 'Decap Beispiel' }),

tests/e2e/specs/drupal/content-hub.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('content hub', () => {
   test.beforeEach(async ({ page }) => {
@@ -33,8 +34,10 @@ test.describe('content hub', () => {
   });
 
   test('returns language specific results', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en/content-hub'));
-    await page.getByRole('link', { name: 'de' }).click();
+    // Change language to German.
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     const content = await page.getByRole('main');
     await expect(content.getByText('Architektur')).toBeVisible();
     await expect(content.getByText('Architecture')).not.toBeVisible();

tests/e2e/specs/drupal/drupal-pages.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('drupal pages', () => {
   test('example drupal page is rendered', async ({ page }) => {
@@ -11,8 +12,9 @@ test.describe('drupal pages', () => {
     ).toBeVisible();
   });
   test('example drupal page is translated', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en/privacy'));
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(
       page.getByRole('heading', { name: 'Privatsphäre' }),
     ).toBeVisible();

tests/e2e/specs/drupal/homepage.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('the homepage', () => {
   test('exists in english', async ({ page }) => {
@@ -12,9 +13,10 @@ test.describe('the homepage', () => {
   });
 
   test('exists in german', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en'));
     const content = await page.getByRole('main');
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(
       content.getByRole('heading', { name: 'Architektur' }),
     ).toBeVisible();

tests/e2e/specs/drupal/menus.spec.ts

@@ -1,25 +1,28 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('menus', () => {
   test('main navigation', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en'));
     const mainNav = page.getByRole('banner').getByRole('navigation');
     await expect(mainNav.getByText('Architecture')).toBeVisible();
     await expect(mainNav.getByText('Architektur')).not.toBeVisible();
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(mainNav.getByText('Architecture')).not.toBeVisible();
     await expect(mainNav.getByText('Gatsby')).not.toBeVisible();
     await expect(mainNav.getByText('Architektur')).toBeVisible();
   });
 
   test('footer navigation', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en'));
     const footerNav = page.getByRole('contentinfo').getByRole('navigation');
     await expect(footerNav.getByText('Privacy')).toBeVisible();
     await expect(footerNav.getByText('Privatsphäre')).not.toBeVisible();
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(footerNav.getByText('Privacy')).not.toBeVisible();
     await expect(footerNav.getByText('Privatsphäre')).toBeVisible();
   });