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 full-size slide

  2. Does anyone remember


    this friend?

    View full-size slide

  3. Or this one?

    View full-size slide

  4. @stefanjudis


    stefanjudis.com | webweekly.email
    Heyo,


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


    View full-size slide

  5. webweekly.email

    View full-size slide

  6. The idea of end-to-end


    testing was great!

    View full-size slide

  7. But it was terrible.

    View full-size slide

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

    View full-size slide

  9. We run the tests


    on demand.
    My colleagues & I


    View full-size slide

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


    View full-size slide

  11. Things got a lot better

    View full-size slide

  12. Playwright is cross-everything

    View full-size slide

  13. Playwright is cross-everything

    View full-size slide

  14. Run your tests in VS Code

    View full-size slide

  15. Very solid typings

    View full-size 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 full-size 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 full-size 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 full-size slide

  19. A very fast release cycle

    View full-size slide

  20. Let's have a look!

    View full-size slide

  21. Auto-wait Web-
    fi
    rst assertions Screenshots


    Test runner Retries Tracing


    VS Code extension Inspector Debugger


    Codegen Image Snapshots Native UI

    View full-size slide

  22. Weekly Playwright tips
    youtube.com/checklyhq

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Treat your UIs


    like your APIs.

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  30. End-to-end monitoring


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

    View full-size slide

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

    View full-size slide

  32. @stefanjudis


    www.stefanjudis.com


    webweekly.email
    Thanks!

    View full-size slide