Merge pull request #36 from dallen4/playwright-e2e

Playwright e2e Drop Flow
dallen4 · Apr 1, 2023 · 4ee5286 · 4ee5286
2 parents 14ca352 + 408ae90
commit 4ee5286
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 26 deletions.
diff --git a/web/organisms/DropFlow.tsx b/web/organisms/DropFlow.tsx
@@ -74,7 +74,7 @@ const DropFlow = () => {
                     description={isMobile && 'Drop your message'}
                 >
                     <StepCard title={'finish your deadrop'}>
-                        <Button onClick={drop}>Drop</Button>
+                        <Button id={'drop-secret-btn'} onClick={drop}>Drop</Button>
                     </StepCard>
                 </Stepper.Step>
                 <Stepper.Completed>

diff --git a/web/organisms/GrabFlow.tsx b/web/organisms/GrabFlow.tsx
@@ -35,12 +35,12 @@ const GrabFlow = () => {
             {status === GrabState.Initial ? (
                 <>
                     <Text>You are about to begin a deadrop.</Text>
-                    <Button onClick={init}>Begin</Button>
+                    <Button id={'begin-grab-btn'} onClick={init}>Begin</Button>
                 </>
             ) : status === GrabState.Confirmed ? (
                 <Box>
                     {getMode() === 'raw' ? (
-                        <Code block>
+                        <Code block id={'drop-secret-value'}>
                             {getSecret()}
                         </Code>
                     ) : (

diff --git a/web/playwright.config.ts b/web/playwright.config.ts
@@ -1,4 +1,4 @@
-import { PlaywrightTestConfig } from '@playwright/test';
+import { PlaywrightTestConfig, devices } from '@playwright/test';
 import path from 'path';
 
 const PORT = process.env.PORT || 3000;
@@ -32,25 +32,68 @@ const config: PlaywrightTestConfig<{
         bypassCSP: true,
     },
     projects: [
+        /* Test against desktop browsers */
         {
-            name: 'Chrome to Chrome',
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+        /* Test against mobile viewports. */
+        {
+            name: 'Mobile Chrome',
+            use: { ...devices['Pixel 5'] },
+        },
+        {
+            name: 'Mobile Safari',
+            use: { ...devices['iPhone 12'] },
+        },
+        {
+            name: 'Chrome to Firefox',
+            use: {
+                dropBrowser: 'chromium',
+                grabBrowser: 'firefox',
+            },
+        },
+        {
+            name: 'Chrome to WebKit',
             use: {
                 dropBrowser: 'chromium',
+                grabBrowser: 'webkit',
+            },
+        },
+        {
+            name: 'Firefox to Chrome',
+            use: {
+                dropBrowser: 'firefox',
                 grabBrowser: 'chromium',
             },
         },
         {
-            name: 'Firefox to Firefox',
+            name: 'Firefox to WebKit',
             use: {
                 dropBrowser: 'firefox',
-                grabBrowser: 'firefox',
+                grabBrowser: 'webkit',
             },
         },
         {
-            name: 'WebKit to WebKit',
+            name: 'WebKit to Chrome',
             use: {
                 dropBrowser: 'webkit',
-                grabBrowser: 'webkit',
+                grabBrowser: 'chromium',
+            },
+        },
+        {
+            name: 'WebKit to Firefox',
+            use: {
+                dropBrowser: 'webkit',
+                grabBrowser: 'firefox',
             },
         },
     ],

diff --git a/web/tests/e2e/drop-flow.spec.ts b/web/tests/e2e/drop-flow.spec.ts
@@ -1,17 +1,22 @@
 import { DROP_PATH } from '@config/paths';
 import { expect } from '@playwright/test';
-import { test } from './util';
-import { createPageForBrowser } from './util';
+import { createContextForBrowser, createPageForBrowser, test } from './util';
 
-test('should start the drop session successfully', async ({
+test('should drop a text secret from one page session to another', async ({
     playwright,
+    browser,
     dropBrowser,
     grabBrowser,
 }) => {
-    const secretValue = 'super secret value';
+    const context = await createContextForBrowser(browser);
+    const dropperPage = dropBrowser
+        ? await createPageForBrowser(playwright[dropBrowser])
+        : await context.newPage();
+    const grabberPage = grabBrowser
+        ? await createPageForBrowser(playwright[grabBrowser])
+        : await context.newPage();
 
-    const dropperPage = await createPageForBrowser(playwright[dropBrowser]);
-    const grabberPage = await createPageForBrowser(playwright[grabBrowser]);
+    const secretValue = 'super secret value';
 
     const dropLink = await test.step('Setup drop', async () => {
         await dropperPage.goto(DROP_PATH);
@@ -28,8 +33,38 @@ test('should start the drop session successfully', async ({
 
         await dropperPage.click('text="Confirm Payload"');
 
-        // const dropLink = await page.locator('#drop-link').getAttribute('href');
-        // console.log(dropLink);
-        return '';
+        const dropLink = await dropperPage
+            .locator('#drop-link')
+            .getAttribute('href');
+
+        return dropLink!;
     });
+
+    const grabbedSecretValue =
+        await test.step('Drop & grab secret', async () => {
+            await grabberPage.goto(dropLink);
+
+            await grabberPage.locator('#begin-grab-btn').click();
+
+            await expect(
+                grabberPage.getByText('Waiting for payload drop...'),
+            ).toBeVisible({
+                timeout: 10_000,
+            });
+
+            await expect(
+                dropperPage.getByRole('heading', {
+                    name: 'finish your deadrop',
+                }),
+            ).toBeVisible({
+                timeout: 10_000,
+            });
+
+            await dropperPage.locator('#drop-secret-btn').click();
+
+            return grabberPage.locator('#drop-secret-value').innerHTML();
+        });
+
+    expect(grabbedSecretValue).toBeDefined();
+    expect(grabbedSecretValue).toEqual(secretValue);
 });
diff --git a/web/tests/e2e/drop-text-init.spec.ts b/web/tests/e2e/drop-text-init.spec.ts
@@ -1,9 +1,10 @@
 import { DROP_PATH } from '@config/paths';
-import { test, expect } from '@playwright/test';
-import { createPageForBrowser } from './util';
+import { expect } from '@playwright/test';
+import { test, createContextForBrowser } from './util';
 
-test('should start the drop session successfully', async ({ playwright }) => {
-    const page = await createPageForBrowser(playwright.webkit);
+test('should start the drop session successfully', async ({ browser }) => {
+    const context = await createContextForBrowser(browser);
+    const page = await context.newPage();
 
     await page.goto(DROP_PATH);
 
@@ -20,4 +21,8 @@ test('should start the drop session successfully', async ({ playwright }) => {
     await page.getByPlaceholder('Your secret').fill(secretValue);
 
     await page.click('text=Confirm Payload');
+
+    const dropLink = await page.locator('#drop-link').getAttribute('href');
+
+    expect(dropLink).toBeDefined();
 });
diff --git a/web/tests/e2e/util.ts b/web/tests/e2e/util.ts
@@ -1,5 +1,5 @@
 import { DISABLE_CAPTCHA_COOKIE } from '@config/cookies';
-import { BrowserType, test as base } from '@playwright/test';
+import { Browser, BrowserType, test as base } from '@playwright/test';
 import { baseURL } from './config';
 
 type BrowserName = 'chromium' | 'firefox' | 'webkit';
@@ -14,9 +14,8 @@ export const test = base.extend<TestOptions>({
     grabBrowser: ['chromium', { option: true }],
 });
 
-export const createPageForBrowser = async (browser: BrowserType) => {
-    const newBrowser = await browser.launch();
-    const context = await newBrowser.newContext();
+export const createContextForBrowser = async (browser: Browser) => {
+    const context = await browser.newContext();
 
     await context.addCookies([
         {
@@ -27,5 +26,12 @@ export const createPageForBrowser = async (browser: BrowserType) => {
         },
     ]);
 
+    return context;
+};
+
+export const createPageForBrowser = async (browser: BrowserType) => {
+    const newBrowser = await browser.launch();
+    const context = await createContextForBrowser(newBrowser);
+
     return context.newPage();
 };