chore: outlook login example (#19221)

examples/outlook-login/.env

@@ -0,0 +1,2 @@
+OUTLOOK_USER='<your test user>@outlook.com'
+OUTLOOK_PASSWORD='<your test user password>'

examples/outlook-login/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/outlook-login/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "outlook-login-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "next",
+    "dotenv": "latest"
+  }
+}

examples/outlook-login/playwright.config.ts

@@ -0,0 +1,44 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables OUTLOOK_USER and OUTLOOK_PASSWORD from file.
+ * https://github.com/motdotla/dotenv
+ */
+require('dotenv').config();
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  reporter: 'html',
+  use: {
+    baseURL: 'https://outlook.com'
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      setup: /.*setup.ts$/,
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      setup: /.*setup.ts$/,
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      setup: /.*setup.ts$/,
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+};
+
+export default config;

examples/outlook-login/tests/calendar.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test.use({
+  storageStateName: 'outlook-test-user'
+});
+
+test('calendar has new event button', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Calendar' }).click();
+  await expect(page.getByRole('button', { name: 'New event' }).getByRole('button', { name: 'New event' })).toBeVisible();
+});

examples/outlook-login/tests/login.setup.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page, context, browserName }) => {
+  await page.goto('/');
+  await page.getByRole('navigation', { name: 'Quick links' }).getByRole('link', { name: 'Sign in' }).click();
+  await page.getByRole('textbox', { name: 'Enter your email, phone, or Skype.' }).fill(process.env.OUTLOOK_USER!);
+  await page.getByRole('button', { name: 'Next' }).click();
+
+  // Outlook serves different login page for the browsers that use WebKit
+  // (based on the User-Agent string).
+  if (browserName === 'webkit') {
+    await page.getByRole('textbox', { name: `Enter the password for ${process.env.OUTLOOK_USER!}` }).fill(process.env.OUTLOOK_PASSWORD!);
+  } else {
+    await page.getByPlaceholder('Password').fill(process.env.OUTLOOK_PASSWORD!);
+  }
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await page.getByLabel('Don\'t show this again').check();
+  await page.getByRole('button', { name: 'Yes' }).click();
+  expect((await context.cookies()).length).toBeTruthy();
+
+  const contextState = await context.storageState();
+  const storage = test.info().storage();
+  await storage.set('outlook-test-user', contextState);
+});

examples/outlook-login/tests/mail.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test.use({
+  storageStateName: 'outlook-test-user'
+});
+
+test('inbox has new mail button', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('button', { name: 'New mail' }).getByRole('button', { name: 'New mail' })).toBeVisible();
+});