Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Playwright can do this?

Playwright can do this?

Learn why Microsoft's testing framework is a stellar solution to test your sites end-to-end.

stefan judis

March 30, 2023
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. @stefanjudis
    Playwright


    can do this?

    View Slide

  2. Does anyone remember


    this friend?

    View Slide

  3. Or this one?

    View Slide

  4. @stefanjudis


    stefanjudis.com | webweekly.email
    Heyo,


    I'm Stefan!
    checklyhq.com
    GDE | Playwright Ambassador


    View Slide

  5. webweekly.email

    View Slide

  6. The idea of end-to-end


    testing was great!

    View Slide

  7. But it was terrible.

    View Slide

  8. Tests were slow, hard
    to write and
    fl
    aky.

    View Slide

  9. We run the tests


    on demand.
    My colleagues & I


    View Slide

  10. We gave up. :/
    My colleagues & I


    View Slide

  11. Things got a lot better

    View Slide

  12. Playwright is cross-everything

    View Slide

  13. Playwright is cross-everything

    View Slide

  14. Run your tests in VS Code

    View Slide

  15. Very solid typings

    View Slide

  16. More than a browser control
    / /
    @ts
    -
    check


    import { test, expect } from "@playwright/test";


    test.describe("navigation", ()
    = >
    {


    test.beforeEach(async ({ page })
    = >
    {


    / /
    Go to the starting url before each test.


    await page.goto("https:
    / /
    playwright.dev/");


    });


    test("main navigation", async ({ page })
    = >
    {


    / /
    Assertions use the expect API.


    await expect(page).toHaveURL("https:
    / /
    playwright.dev/");


    });


    });


    View Slide

  17. Easy to parallelize
    npx playwright test
    - -
    workers 4
    / /
    playwright.conf
    i
    g.js


    import { def
    i
    neConf
    i
    g } from '@playwright/test';


    export default def
    i
    neConf
    i
    g({


    workers: process.env.CI ? 2 : undef
    i
    ned,


    })

    View Slide

  18. Built for quick execution
    const button = page.locator('button')


    await button.click()


    await expect(button).toBeHidden()
    Auto-wait and web-
    fi
    rst assertions make


    waitFor statements redundant.

    View Slide

  19. A very fast release cycle

    View Slide

  20. Let's have a look!

    View Slide

  21. Auto-wait Web-
    fi
    rst assertions Screenshots


    Test runner Retries Tracing


    VS Code extension Inspector Debugger


    Codegen Image Snapshots Native UI

    View Slide

  22. Weekly Playwright tips
    youtube.com/checklyhq

    View Slide

  23. There's no silver bullet when
    it comes to e2e testing...

    View Slide

  24. ... but Playwright is a
    stellar solution!

    View Slide

  25. Treat your UIs


    like your APIs.

    View Slide

  26. APIs are measured with the
    number of nines — 99.999%.

    View Slide

  27. Your entire application
    should be tested all the time!

    View Slide

  28. Account create
    Account login
    Account update
    Account delete
    99.999%
    99.1%
    99.8%
    99.94%
    Stellar frontends with con
    fi
    dence

    View Slide

  29. blog.checklyhq.com/how-playwright-can-monitor-third-party-resources/

    View Slide

  30. End-to-end monitoring


    should be your safety net.*
    * Your future-self will thank you!

    View Slide

  31. Start shipping with
    con
    fi
    dence!
    * Your future-self will thank you!

    View Slide

  32. @stefanjudis


    www.stefanjudis.com


    webweekly.email
    Thanks!

    View Slide