Playwright can do this?

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

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