I'm a big fan of testing things - especially end-to-end (e2e). Let's see how Playwright can help us automate our login and video checks.

The focus will be: great, but how do I actually use this thing?

Off Camera

Setup a test user with Supabase and a new login page (I have to) as we have no way to authenticate our user otherwise.

Setting Up Playwright

We'll do the needful and see how Playwright works:

• Install Playwright, showing both ways (VS Code Extension and CLI)
• Look through the config, tweaking to make it a bit more usable
• Have a gander at the examples
• Understand how Locaters work and what makes UI testing so brittle

Authentication Issues

Our tests need to know who the user is, so we'll plug in authentication and discuss how this would work in automated tests (it won't and shouldn't)

Running Tests

Lots of ways to run tests:

• VS Code Extension (don't like)
• The CLI (it's OK)
• The UI tool (it's great)

Rob's Opinion

I have lots of opinions on tests and testing, and I'm happy to share

Snippets

I have a number of snippets I like to use because I like to write tests by hand. Hope you find them useful!

"Playwright":{
        "prefix": "pw",
        "body": [
            "const { test, expect } = require('@playwright/test');\r\n",
            "test.describe(\"$1\", () => {",
            "\ttest.beforeEach(async ({page}) => {",
            "\t\tawait page.goto('')",
            "\t});",
            "\ttest(\"$2\", async ({page}) => {",
            "\t\t$0",
            "\t});",
            "});"
        ]
    },
    "Playwright describe" : {
        "prefix": "pwd",
        "body": [
            "test.describe(\"$1\", () => {",
            "  $0",
            "});"
        ]
    },
    "Playwright label" : {
        "prefix": "pwlbl",
        "body": [
            "const $0 = await page.getByLabel(\"$1\");"
        ]
    },
    "Playwright id" : {
        "prefix": "pwid",
        "body": [
            "const $0 = await page.locator(\"#$1\");"
        ]
    },
    "Playwright test id" : {
        "prefix": "pwtid",
        "body": [
            "const $0 = await page.getByTestId(\"$1\");"
        ]
    },
    "Playwright role" : {
        "prefix": "pwrole",
        "body": [
            "const $0 = await page.getByRole('$1', { name: '$2' });"
        ]
    },