feat(e2e): playwright - add global login setup and teardown, show certificate tests (#51368)

.github/workflows/e2e-playwright.yml

@@ -131,6 +131,9 @@ jobs:
       - name: Seed Database
         run: pnpm run seed
 
+      - name: Seed Database with Certified User
+        run: pnpm run seed:certified-user
+
       # start-ci uses pm2, so it needs to be installed globally
       - name: Install pm2
         run: npm i -g pm2

e2e/LoginAuth.json

@@ -0,0 +1,95 @@
+{
+  "cookies": [
+    {
+      "name": "_ga",
+      "value": "GA1.1.581746587.1692856321",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1727416320.892245,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_gid",
+      "value": "GA1.1.1350865451.1692856321",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1692942720,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_gat_UA-55446531-19",
+      "value": "1",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1692856380,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_ga_S7DT07TF4G",
+      "value": "GS1.1.1692856320.1.0.1692856320.0.0.0",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1727416320.891943,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_ga_KS9N2Z7EHL",
+      "value": "GS1.1.1692856321.1.0.1692856321.0.0.0",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1727416321.277638,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "_csrf",
+      "value": "5U4rzxSzclMprLi4cvz7bCfZ",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Strict"
+    },
+    {
+      "name": "csrf_token",
+      "value": "dAxgAH76-KZn92rN_ViqD3DbIi3HLBi9ZKnY",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Strict"
+    },
+    {
+      "name": "jwt_access_token",
+      "value": "s%3AeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2Nlc3NUb2tlbiI6eyJpZCI6Im55eW5zVHlRcm1YTm84QVBNS2lHN1NBa1N2c0JpQzFYblo4UWhJMkd1aGZpeEFhVjZoRXB1SjVnRlROZUVjSlUiLCJ0dGwiOjc3NzYwMDAwMDAwLCJjcmVhdGVkIjoiMjAyMy0wOC0yNFQwNTo1MjowMS40NTVaIiwidXNlcklkIjoiNWZhMmRiMDBhMjVjMWMxZmE0OWNlMDY3In0sImlhdCI6MTY5Mjg1NjMyMX0.r9MVox5vCm23tECIWNud7TR7sFwIU-wd-GovD2IPQi0.KVZupFa7dUeu5aiOeFIbiRlTM6upKPw78DFTb%2FzWjps",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1727416321.460702,
+      "httpOnly": false,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "connect.sid",
+      "value": "s%3AVs5NZBimD3InWrpU5LOBoLcfKdDuPSE2.PHGiu5kNikimtDu4kuicTNURRNc3mTlKOeiOGqHztak",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1727416321.46071,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": []
+}

e2e/global-setup.ts

@@ -0,0 +1,7 @@
+import { test as setup } from '@playwright/test';
+
+setup('Login', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('link', { name: 'Sign in' }).click();
+  await page.context().storageState({ path: './LoginAuth.json' });
+});

e2e/playwright.config.ts

@@ -1,11 +1,13 @@
+import path from 'path';
+import { config as dotenvConfig } from 'dotenv';
 import { defineConfig, devices } from '@playwright/test';
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+const envPath = path.resolve(__dirname, '..', '.env');
-
+dotenvConfig({ path: envPath });
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -27,7 +29,6 @@ export default defineConfig({
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: process.env.HOME_LOCATION || 'http://127.0.0.1:8000',
-
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
 
@@ -37,6 +38,11 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'setup',
+      testMatch: 'global-setup.ts'
+    },
+
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] }

e2e/show-certificate-else.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.describe('Show certification else', () => {
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+    await page.goto('/certification/certifieduser/responsive-web-design');
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test('while viewing someone else, should display certificate', async () => {
+    expect(await page.isVisible('text=successfully completed')).toBeTruthy();
+    expect(await page.isVisible('text=Responsive Web Design')).toBeTruthy();
+  });
+
+  test('while viewing someone else, should not render a LinkedIn button and Twitter button', async () => {
+    await expect(
+      page.locator('text=Add this certification to my LinkedIn profile')
+    ).toBeHidden();
+    await expect(
+      page.locator('text=Share this certification on Twitter')
+    ).toBeHidden();
+  });
+});

e2e/show-certificate-own.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.use({ storageState: 'LoginAuth.json' });
+
+test.describe('Show certification own', () => {
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+    await page.goto('/certification/certifieduser/responsive-web-design');
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test('should display certificate details', async () => {
+    expect(await page.isVisible('text=successfully completed')).toBeTruthy();
+    expect(await page.isVisible('text=Responsive Web Design')).toBeTruthy();
+    await expect(page.locator('[data-cy=issue-date]')).toContainText(
+      'Developer Certification on August 3, 2018'
+    );
+  });
+
+  test('should render LinkedIn and Twitter buttons', async () => {
+    expect(
+      await page.isVisible('text=Add this certification to my LinkedIn profile')
+    ).toBeTruthy();
+    expect(
+      await page.isVisible('text=Share this certification on Twitter')
+    ).toBeTruthy();
+  });
+});