sample PW tests

* develop: (174 commits)
  chore: cleanup
  fix: Error type
  chore: Bump node
  Show good error messages.
  chore: fix trailing slash
  chore(deps): update all non-major dependencies
  Block only tests
  snapshot
  Remove it.only
  fix #1103
  chore(deps): update all non-major dependencies
  Update Browserslist
  chore: Update deps
  fix: Remove AsyncQueue
  Update Browserslist
  Fix #1089: Update monaco-mermaid
  chore(deps): update all non-major dependencies
  fix lint
  chore: Cleanup, fix theme
  fix: Snapshot, env types
  ...

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '14.x'
+    - name: Install dependencies
+      run: yarn
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v2
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -12,3 +12,6 @@ yarn-error.log
 /cypress/downloads
 /cypress/videos
 /cypress/screenshots
+/test-results/
+/playwright-report/
+/playwright/.cache/

package.json

@@ -19,10 +19,12 @@
     "test:coverage": "vitest run --coverage",
     "test:browser": "cypress run",
     "test": "test:unit && test:browser",
-    "cy": "cypress open"
+    "cy": "cypress open",
+    "pw": "npx playwright test"
   },
   "devDependencies": {
     "@cypress/snapshot": "2.1.7",
+    "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-static": "1.0.0-next.48",
     "@sveltejs/kit": "1.0.0-next.561",
     "@testing-library/jest-dom": "5.16.5",

playwright.config.ts

@@ -0,0 +1,106 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      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'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ]
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

tests-examples/demo-todo-app.spec.ts

@@ -0,0 +1,398 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://demo.playwright.dev/todomvc');
+});
+
+const TODO_ITEMS = [
+  'buy some cheese',
+  'feed the cat',
+  'book a doctors appointment'
+];
+
+test.describe('New Todo', () => {
+  test('should allow me to add todo items', async ({ page }) => {
+    // Create 1st todo.
+    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
+    await page.locator('.new-todo').press('Enter');
+
+    // Make sure the list only has one todo item.
+    await expect(page.locator('.view label')).toHaveText([
+      TODO_ITEMS[0]
+    ]);
+
+    // Create 2nd todo.
+    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
+    await page.locator('.new-todo').press('Enter');
+
+    // Make sure the list now has two todo items.
+    await expect(page.locator('.view label')).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[1]
+    ]);
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+
+  test('should clear text input field when an item is added', async ({ page }) => {
+    // Create one todo item.
+    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
+    await page.locator('.new-todo').press('Enter');
+
+    // Check that input is empty.
+    await expect(page.locator('.new-todo')).toBeEmpty();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+
+  test('should append new items to the bottom of the list', async ({ page }) => {
+    // Create 3 items.
+    await createDefaultTodos(page);
+
+    // Check test using different methods.
+    await expect(page.locator('.todo-count')).toHaveText('3 items left');
+    await expect(page.locator('.todo-count')).toContainText('3');
+    await expect(page.locator('.todo-count')).toHaveText(/3/);
+
+    // Check all items in one call.
+    await expect(page.locator('.view label')).toHaveText(TODO_ITEMS);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should show #main and #footer when items added', async ({ page }) => {
+    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
+    await page.locator('.new-todo').press('Enter');
+
+    await expect(page.locator('.main')).toBeVisible();
+    await expect(page.locator('.footer')).toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+});
+
+test.describe('Mark all as completed', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to mark all items as completed', async ({ page }) => {
+    // Complete all todos.
+    await page.locator('.toggle-all').check();
+
+    // Ensure all todos have 'completed' class.
+    await expect(page.locator('.todo-list li')).toHaveClass(['completed', 'completed', 'completed']);
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to clear the complete state of all items', async ({ page }) => {
+    // Check and then immediately uncheck.
+    await page.locator('.toggle-all').check();
+    await page.locator('.toggle-all').uncheck();
+
+    // Should be no completed classes.
+    await expect(page.locator('.todo-list li')).toHaveClass(['', '', '']);
+  });
+
+  test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
+    const toggleAll = page.locator('.toggle-all');
+    await toggleAll.check();
+    await expect(toggleAll).toBeChecked();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Uncheck first todo.
+    const firstTodo = page.locator('.todo-list li').nth(0);
+    await firstTodo.locator('.toggle').uncheck();
+
+    // Reuse toggleAll locator and make sure its not checked.
+    await expect(toggleAll).not.toBeChecked();
+
+    await firstTodo.locator('.toggle').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Assert the toggle all is checked again.
+    await expect(toggleAll).toBeChecked();
+  });
+});
+
+test.describe('Item', () => {
+
+  test('should allow me to mark items as complete', async ({ page }) => {
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await page.locator('.new-todo').fill(item);
+      await page.locator('.new-todo').press('Enter');
+    }
+
+    // Check first item.
+    const firstTodo = page.locator('.todo-list li').nth(0);
+    await firstTodo.locator('.toggle').check();
+    await expect(firstTodo).toHaveClass('completed');
+
+    // Check second item.
+    const secondTodo = page.locator('.todo-list li').nth(1);
+    await expect(secondTodo).not.toHaveClass('completed');
+    await secondTodo.locator('.toggle').check();
+
+    // Assert completed class.
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).toHaveClass('completed');
+  });
+
+  test('should allow me to un-mark items as complete', async ({ page }) => {
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await page.locator('.new-todo').fill(item);
+      await page.locator('.new-todo').press('Enter');
+    }
+
+    const firstTodo = page.locator('.todo-list li').nth(0);
+    const secondTodo = page.locator('.todo-list li').nth(1);
+    await firstTodo.locator('.toggle').check();
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await firstTodo.locator('.toggle').uncheck();
+    await expect(firstTodo).not.toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+  });
+
+  test('should allow me to edit an item', async ({ page }) => {
+    await createDefaultTodos(page);
+
+    const todoItems = page.locator('.todo-list li');
+    const secondTodo = todoItems.nth(1);
+    await secondTodo.dblclick();
+    await expect(secondTodo.locator('.edit')).toHaveValue(TODO_ITEMS[1]);
+    await secondTodo.locator('.edit').fill('buy some sausages');
+    await secondTodo.locator('.edit').press('Enter');
+
+    // Explicitly assert the new text value.
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2]
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+});
+
+test.describe('Editing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should hide other controls when editing', async ({ page }) => {
+    const todoItem = page.locator('.todo-list li').nth(1);
+    await todoItem.dblclick();
+    await expect(todoItem.locator('.toggle')).not.toBeVisible();
+    await expect(todoItem.locator('label')).not.toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should save edits on blur', async ({ page }) => {
+    const todoItems = page.locator('.todo-list li');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).locator('.edit').fill('buy some sausages');
+    await todoItems.nth(1).locator('.edit').dispatchEvent('blur');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should trim entered text', async ({ page }) => {
+    const todoItems = page.locator('.todo-list li');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).locator('.edit').fill('    buy some sausages    ');
+    await todoItems.nth(1).locator('.edit').press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should remove the item if an empty text string was entered', async ({ page }) => {
+    const todoItems = page.locator('.todo-list li');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).locator('.edit').fill('');
+    await todoItems.nth(1).locator('.edit').press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[2],
+    ]);
+  });
+
+  test('should cancel edits on escape', async ({ page }) => {
+    const todoItems = page.locator('.todo-list li');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).locator('.edit').press('Escape');
+    await expect(todoItems).toHaveText(TODO_ITEMS);
+  });
+});
+
+test.describe('Counter', () => {
+  test('should display the current number of todo items', async ({ page }) => {
+    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
+    await page.locator('.new-todo').press('Enter');
+    await expect(page.locator('.todo-count')).toContainText('1');
+
+    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
+    await page.locator('.new-todo').press('Enter');
+    await expect(page.locator('.todo-count')).toContainText('2');
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+});
+
+test.describe('Clear completed button', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+  });
+
+  test('should display the correct text', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await expect(page.locator('.clear-completed')).toHaveText('Clear completed');
+  });
+
+  test('should remove completed items when clicked', async ({ page }) => {
+    const todoItems = page.locator('.todo-list li');
+    await todoItems.nth(1).locator('.toggle').check();
+    await page.locator('.clear-completed').click();
+    await expect(todoItems).toHaveCount(2);
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should be hidden when there are no items that are completed', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await page.locator('.clear-completed').click();
+    await expect(page.locator('.clear-completed')).toBeHidden();
+  });
+});
+
+test.describe('Persistence', () => {
+  test('should persist its data', async ({ page }) => {
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await page.locator('.new-todo').fill(item);
+      await page.locator('.new-todo').press('Enter');
+    }
+
+    const todoItems = page.locator('.todo-list li');
+    await todoItems.nth(0).locator('.toggle').check();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(todoItems).toHaveClass(['completed', '']);
+
+    // Ensure there is 1 completed item.
+    checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    // Now reload.
+    await page.reload();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(todoItems).toHaveClass(['completed', '']);
+  });
+});
+
+test.describe('Routing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    // make sure the app had a chance to save updated todos in storage
+    // before navigating to a new view, otherwise the items can get lost :(
+    // in some frameworks like Durandal
+    await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+  });
+
+  test('should allow me to display active items', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').nth(1).check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.locator('.filters >> text=Active').click();
+    await expect(page.locator('.todo-list li')).toHaveCount(2);
+    await expect(page.locator('.todo-list li')).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should respect the back button', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').nth(1).check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await test.step('Showing all items', async () => {
+      await page.locator('.filters >> text=All').click();
+      await expect(page.locator('.todo-list li')).toHaveCount(3);
+    });
+
+    await test.step('Showing active items', async () => {
+      await page.locator('.filters >> text=Active').click();
+    });
+
+    await test.step('Showing completed items', async () => {
+      await page.locator('.filters >> text=Completed').click();
+    });
+
+    await expect(page.locator('.todo-list li')).toHaveCount(1);
+    await page.goBack();
+    await expect(page.locator('.todo-list li')).toHaveCount(2);
+    await page.goBack();
+    await expect(page.locator('.todo-list li')).toHaveCount(3);
+  });
+
+  test('should allow me to display completed items', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').nth(1).check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.locator('.filters >> text=Completed').click();
+    await expect(page.locator('.todo-list li')).toHaveCount(1);
+  });
+
+  test('should allow me to display all items', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').nth(1).check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.locator('.filters >> text=Active').click();
+    await page.locator('.filters >> text=Completed').click();
+    await page.locator('.filters >> text=All').click();
+    await expect(page.locator('.todo-list li')).toHaveCount(3);
+  });
+
+  test('should highlight the currently applied filter', async ({ page }) => {
+    await expect(page.locator('.filters >> text=All')).toHaveClass('selected');
+    await page.locator('.filters >> text=Active').click();
+    // Page change - active items.
+    await expect(page.locator('.filters >> text=Active')).toHaveClass('selected');
+    await page.locator('.filters >> text=Completed').click();
+    // Page change - completed items.
+    await expect(page.locator('.filters >> text=Completed')).toHaveClass('selected');
+  });
+});
+
+async function createDefaultTodos(page: Page) {
+  for (const item of TODO_ITEMS) {
+    await page.locator('.new-todo').fill(item);
+    await page.locator('.new-todo').press('Enter');
+  }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).length === e;
+  }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e;
+  }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+  return await page.waitForFunction(t => {
+    return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t);
+  }, title);
+}

tests/loadsite.spec.ts

@@ -0,0 +1,179 @@
+import { toBase64 } from 'js-base64';
+
+// describe('Site Loads', () => {
+// 	beforeEach(() => {
+// 		cy.clearLocalStorage();
+// 		cy.visit('/');
+// 	});
+
+// 	it('Check Home page load', () => {
+// 		cy.url().should('include', '/edit');
+// 		cy.contains('History').click();
+// 		cy.getLocalStorage('codeStore').snapshot();
+// 	});
+
+// 	it('Check Redirect from old URL', () => {
+// 		cy.visit(
+// 			'/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
+// 		);
+// 		cy.url().should('include', '/edit#pako:eNp');
+// 	});
+
+// 	it('should load sample diagrams when clicked', () => {
+// 		cy.contains('Sample Diagrams').click();
+// 		cy.contains('Pie').click();
+// 		cy.contains('pie title Pets adopted by volunteers');
+// 		cy.contains('Class').click();
+// 		cy.contains('classDiagram');
+// 	});
+
+// 	(Cypress.env('CI') === 'true' ? describe : describe.skip)('github', () => {
+// 		it('should load diagram from gist', () => {
+// 			cy.visit(`/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a`);
+// 			cy.contains('History').click();
+// 			cy.contains('Go shopping!!');
+// 			cy.contains('Revisions');
+// 			cy.contains('sidharthv96 v8f8f1e2');
+// 			cy.contains('sidharthv96 v7851e19');
+// 			cy.getLocalStorage('codeStore').snapshot();
+// 		});
+
+// 		it('should load diagram from gist revision', () => {
+// 			cy.visit(
+// 				'/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19'
+// 			);
+// 			cy.contains('History').click();
+// 			cy.contains('Party');
+// 			cy.contains('Revisions');
+// 			cy.contains('sidharthv96 v7851e19');
+// 			cy.getLocalStorage('codeStore').snapshot();
+// 		});
+
+// 		it('should load diagram from raw files', () => {
+// 			cy.visit(
+// 				'/edit?code=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd&config=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json'
+// 			);
+// 			cy.contains('Party');
+// 			cy.getLocalStorage('codeStore').snapshot();
+// 		});
+// 	});
+
+// 	// Disabled temporarily. Should be enabled after the issue is fixed in Mermaid.
+// 	// it('should prevent setting the "securityLevel" option via URL', () => {
+// 	// 	const b64State = toBase64(
+// 	// 		`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`,
+// 	// 		true
+// 	// 	);
+// 	// 	cy.on('window:confirm', () => true);
+// 	// 	cy.visit(`/edit#${b64State}`);
+// 	// 	cy.contains('Config').click();
+// 	// 	cy.contains('forest');
+// 	// 	cy.contains('securityLevel').should('not.exist');
+// 	// 	cy.get('#view').find('img').should('not.exist');
+// 	// 	cy.get('#view').contains('<img');
+// 	// 	cy.get('#view').contains(`src='https://via.placeholder.com/64'`);
+// 	// });
+
+// 	it.skip('should allow persisting "securityLevel" using confirm dialogue', () => {
+// 		const b64State = toBase64(
+// 			`{"code":"graph TD\\nA[\\"<img src='https://dummyimage.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`,
+// 			true
+// 		);
+// 		cy.on('window:confirm', () => false);
+// 		cy.visit(`/edit#${b64State}`);
+// 		cy.get('#editor').type(' ');
+// 		cy.contains('Config').click();
+// 		cy.contains('forest');
+// 		cy.contains('securityLevel');
+// 		cy.get('#view').find('img').should('be.visible');
+// 	});
+
+// 	it('should show troubleshooting steps if loading fails', () => {
+// 		cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
+// 		cy.reload(true);
+// 		cy.contains('Please Click here to Raise an issue in github.');
+// 	});
+
+// 	it('should load uncompressed URL', () => {
+// 		cy.visit(
+// 			'/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
+// 		);
+// 		cy.contains('New Year');
+// 		cy.visit(
+// 			'/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+// 		);
+// 		cy.contains('Animal');
+// 		cy.visit(
+// 			'/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
+// 		);
+// 		cy.contains('New Year');
+// 	});
+
+// 	it('should load compressed URL', () => {
+// 		cy.visit(
+// 			'/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
+// 		);
+// 		cy.contains('New Year');
+// 		cy.visit(
+// 			'/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ'
+// 		);
+// 		cy.contains('Animal');
+// 	});
+// });
+
+import { test, expect } from '@playwright/test';
+
+test.describe('site loads', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      window.localStorage.clear();
+    });
+    await page.goto('/', { waitUntil: 'networkidle' });
+  });
+
+  test('should load home page', async ({ page }) => {
+    expect(page.url()).toContain('/edit');
+    await expect(page.locator('"History"')).toBeVisible();
+    // const { origins } = await context.storageState();
+    // console.log(JSON.stringify(origins));
+    // expect(JSON.stringify(origins)).toMatchSnapshot('initial-storage-state.json');
+  });
+
+  test('should redirect from old URL', async ({ page }) => {
+    // Note that Promise.all prevents a race condition
+    // between clicking and waiting for a navigation.
+    await Promise.all([
+      page.waitForNavigation({ url: '**/edit#pako:eNp**', timeout: 1000 }),
+      page.goto(
+        '/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
+      )
+    ]);
+    expect(page.url()).toContain('/edit#pako:eNp');
+  });
+
+  test('should load sample diagrams when clicked', async ({ page }) => {
+    await page.click('"Sample Diagrams"');
+    await page.click('"Pie"');
+    await expect(page.locator('"pie title Pets adopted by volunteers"')).toBeVisible();
+    await page.click('"Class"');
+    await expect(page.locator('"classDiagram"')).toBeVisible();
+  });
+});
+// test('homepage has Playwright in title and get started link linking to the intro page', async ({
+// 	page,
+// 	context
+// }) => {
+// 	await page.goto(
+// 		'http://localhost:3000/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19'
+// 	);
+
+// 	// cy.getLocalStorage('codeStore').snapshot();
+// 	// Expect a title "to contain" a substring.
+// 	await page.locator('"History"').click();
+// 	await page.locator('"Party"').isVisible();
+// 	await page.locator('"Revisions"').isVisible();
+// 	await page.locator('"sidharthv96 v7851e19"').isVisible();
+// 	await page.waitForTimeout(400);
+// 	const storage = await context.storageState();
+// 	expect(JSON.stringify(storage)).toMatchSnapshot();
+// });

tests/loadsite.spec.ts-snapshots/initial-storage-state-chromium-darwin.json

@@ -0,0 +1,17 @@
+[
+  {
+    "origin": "http://localhost:3000",
+    "localStorage": [
+      { "name": "__anon_id", "value": "\"87f53493-b439-425c-961c-9a2014f0ced8\"" },
+      { "name": "manualHistoryStore", "value": "[]" },
+      { "name": "autoHistoryMode", "value": "\"manual\"" },
+      {
+        "name": "codeStore",
+        "value": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
+      },
+      { "name": "migrations", "value": "{\"version\":0}" },
+      { "name": "themeStore", "value": "{\"theme\":\"light\",\"isDark\":false}" },
+      { "name": "autoHistoryStore", "value": "[]" }
+    ]
+  }
+]

tests/loadsite.spec.ts-snapshots/site-loads-Check-Home-page-load-1-chromium-darwin.txt

@@ -0,0 +1 @@
+[{"origin":"http://localhost:3000","localStorage":[{"name":"__anon_id","value":"\"e4127e54-eced-443f-837e-0986e577b624\""},{"name":"manualHistoryStore","value":"[]"},{"name":"autoHistoryMode","value":"\"manual\""},{"name":"codeStore","value":"{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"},{"name":"migrations","value":"{\"version\":0}"},{"name":"themeStore","value":"{\"theme\":\"light\",\"isDark\":false}"},{"name":"autoHistoryStore","value":"[]"}]}]

tsconfig.json

@@ -6,8 +6,12 @@
     "cypress/**/*.ts",
     "cypress/**/*.js",
     "cypress/**/*.json",
+    "tests/**/*.ts",
+    "tests/**/*.js",
+    "tests/**/*.json",
     "static/**/*.js",
-    "static/**/*.json"
+    "static/**/*.json",
+    "./playwright.config.ts"
   ],
   "compilerOptions": {
     "resolveJsonModule": true,

yarn.lock

@@ -283,6 +283,14 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.28.1":
+  version "1.28.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.28.1.tgz#e5be297e024a3256610cac2baaa9347fd57c7860"
+  integrity sha512-xN6spdqrNlwSn9KabIhqfZR7IWjPpFK1835tFNgjrlysaSezuX8PYUwaz38V/yI8TJLG9PkAMEXoHRXYXlpTPQ==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.28.1"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -4125,6 +4133,11 @@ plausible-tracker@^0.3.1:
   resolved "https://registry.yarnpkg.com/plausible-tracker/-/plausible-tracker-0.3.8.tgz#9b8b322cc41e0e1d6473869ef234deea365a5a40"
   integrity sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==
 
+playwright-core@1.28.1:
+  version "1.28.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.28.1.tgz#8400be9f4a8d1c0489abdb9e75a4cc0ffc3c00cb"
+  integrity sha512-3PixLnGPno0E8rSBJjtwqTwJe3Yw72QwBBBxNoukIj3lEeBNXwbNiKrNuB1oyQgTBw5QHUhNO3SteEtHaMK6ag==
+
 postcss-calc@^8.2.3:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"