The Evolution of Browser Automation

The web ecosystem has changed a lot over the last decade. From displaying static generated HTML code to running complex web applications, the browser has become the software of choice to provide great user experiences across many platforms. With new powerful features like WebXR or WebAssembly, more and more capabilities are being shipped to the browser every year allowing it to provide an even more enriched experience on the web.

With every novel API available in the browser, new interactions between the user and your application are possible, which increases the complexity of your frontend application and the area for bugs being introduced. At the same time we are putting more load on the browsers main thread while trying to manage a fast page load and smooth animations. The web is moving fast, however browser testing appears to still be the same. A lot has changed in recent years, new JavaScript automation frameworks have been popping up that addresses a lot of pain points that developers face. The MDN Web Developer Needs Assessment has shown that providing a consistent experience across browsers, even on outdated ones, is still a high priority for developers today and becomes even more important tomorrow. But how are the browser automation frameworks tackling this challenge to allow their users to test their applications using all these new upcoming browser features?

In this session, we’ll take a look at what has happened behind the scenes in browser automation throughout the years and what the future will have in stock for us. We will examine how web testing will develop and what challenges this will bring for conventional frameworks like Selenium or WebdriverIO, as well as new frameworks such as Cypress, Puppeteer and Playwright. Lastly, we will experiment with some new automation capabilities these frameworks provide to test some of the new web features.

Transcript

1. 7+((92/87,21  2)%52:6(5$8720$7,21
2. !ńƞŊƦƴŊöŭ ƞŸūöŭŭ „ƛġŭ²ŸƼƞēġ§ƞŸļƞöū„ĻǫēġσƦöƼēġŢöĒƦ σēńƞŊƦƴŊöŭ͡ĒƞŸūöŭŭ σĒƞŸūöŭŭ
3. è&$5/6$*$1 ͩæŸƼńöǔġƴŸŞŭŸǕƴńġƛöƦƴƴŸƼŭĚġƞƦƴöŭĚƴńġ ƛƞġƦġŭƴ͌ͪ
4. ̈̆̆̊ ̈̆̆̍ ̈̆̇̆ ̈̆̇̉ ̈̆̇̌ ̈̆̇̏ ͍ ²ŊūŸŭ ²ƴġǕöƞƴ ēƞġöƴġĚ àġĒ(ƞŊǔġƞ ̆̋ ²ġŢġŭŊƼūöŭĚ àġĒ(ƞŊǔġƞ ūġƞļġŊŭƴŸ ²ġŢġŭŊƼū͡àġĒ(ƞŊǔġƞ ̆̏ höƦŸŭ RƼļļŊŭƦ ͛²öƼēġmöĒƦ !Ÿ͡IŸƼŭĚġƞ͜ ēƞġöƴġĚ ²ġŢġŭŊƼū ̆̊ ²öƼēġmöĒƦ ǕöƦ ĻŸƼŭĚġĚ ̆̎ !ǛƛƞġƦƦ͌ŊŸ ǕöƦĻŸƼŭĚġĚ ̇̋ àġĒ(ƞŊǔġƞ ĒġēŸūġƦà̉! ªġēŸūūġŭĚöƴŊŸŭ ̇̎ àġĒ(ƞŊǔġƞ Ŋ(Ŋ ǕŸƞŞŊŭŊƴŊöƴġĚ ̇̏ ̇ƦƴªġŢġöƦġŸĻ ²ġŢġŭŊƼū͡àġĒ(ƞŊǔġƞ h² ŊŭĚŊŭļƦ ̇ƦƴƛƛŊƼū ªġŢġöƦġ ̇ƦƴÀġƦƴēöĻġ ªġŢġöƦġ ̇Ʀƴ§Ƽƛƛġƴġġƞ ªġŢġöƦġ !ǛƛƞġƦƦ §ƼĒŢŊē ġƴö ̇Ʀƴ§ŢöǛǕƞŊļńƴ ªġŢġöƦġ :+$7+$33(1('35(9,286/< ̇Ʀƴ§ƞŸƴƞöēƴŸƞ ªġŢġöƦġ ̇ƦƴàġĒĚƞŊǔġƞX„ ªġŢġöƦġ à̉!àJƦƴöƞƴƦ ƴŸƦƛġē àġĒ(ƞŊǔġƞ §ƞŸƴŸēŸŢ ̇̈ ͂ǔ̈
5. 7\SHVRI7RROV &RQYHQWLRQDO 1RQ6WDQGDUG
6. &RQYHQWLRQDO7RROV Ɣ ĒöƦġĚŸŭƴńġà̉!àġĒ(ƞŊǔġƞƦƛġēŊǫēöƴŊŸŭ Ɣ ƴƞƼġēƞŸƦƦĒƞŸǕƦġƞöƼƴŸūöƴŊŸŭ Ɣ ĒƞŸǕƦġƞöŭĚūŸĒŊŢġƦƼƛƛŸƞƴ Ɣ ŢŊūŊƴġĚöƼƴŸūöƴŊŸŭēöƛöĒŊŢŊƴŊġƦ͡©ĻŸēƼƦ Ɣ „ƛġŭļŸǔġƞŭġĚŸƛġŭƦŸƼƞēġƛƞŸśġēƴƦǕŊƴń ŢŸŭļńŊƦƴŸƞǛöŭĚŢöƞļġēŸūūƼŭŊƴŊġƦ
7. 1RQ6WDQGDUG7RROV Ɣ ēƼƦƴŸū͛ŭŸŭ͡ƦƴöŭĚöƞĚŊƦġĚ͜öƼƴŸūöƴŊŸŭ ż ĒöƦġĚŸŭĒƞŸǕƦġƞ§XƦ ż Ÿƞhöǔö²ēƞŊƛƴġūƼŢöƴŊŸŭ Ɣ mŊūŊƴġĚēƞŸƦƦĒƞŸǕƦġƞƦƼƛƛŸƞƴ Ɣ wŸƞġöƼƴŸūöƴŊŸŭēöƛöĒŊŢŊƴŊġƦ͡ĚġǔġŢŸƛġƞ ĻŸēƼƦ Ɣ !ŸūƛöŭǛĒöŞġĚöŭĚļŸǔġƞŭġĚ„ƛġŭ ²ŸƼƞēġƛƞŸśġēƴƦ ż !ǛƛƞġƦƦ͌ŊŸή!ǛƛƞġƦƦ ż ÀġƦƴēöĻġή(ġǔ0ǚƛƞġƦƦ ż §ŢöǛǕƞŊļńƴήwŊēƞŸƦŸĻƴ ż §ƼƛƛġƴġġƞήJŸŸļŢġ
8. ÀńƞŸƼļńƴńġàġĒ(ƞŊǔġƞ ƛƞŸƴŸēŸŢ $8720$7,21675$7(*,(6 :HEGULYHU,2 ÀńƞŸƼļńàġĒ(ƞŊǔġƞτ ĒƞŸǕƦġƞ§XƦ 6HOHQLXP 7HVWFDIH ÀńƞŸƼļńàġĒ §XƦ 3XSSHWHHU ÀńƞŸƼļńĒƞŸǕƦġƞ§XƦ &\SUHVVLR ÀńƞŸƼļńàġĒΒ ĒƞŸǕƦġƞ§XƦ 3OD\ZULJKW ÀńƞŸƼļńēƼƦƴŸū͒ ūŸĚŊǫġĚĒƞŸǕƦġƞ§XƦ
9. ̉ƞĚļġŭġƞöƴŊŸŭŸĻöƼƴŸūöƴŊŭļ ĒƞŸǕƦġƞƦ „ĻǫēŊöŢàġĒ²ƴöŭĚöƞĚ ĚġǔġŢŸƛġĚöƴà̉!Ŋŭö ēŸūūŸŭġĻĻŸƞƴĒǛöŢŢĒƞŸǕƦġƞ ǔġŭĚŸƞƦ ÀńŸƞŸƼļńŢǛƴġƦƴġĚöƦƛöƞƴŸĻ ƴńġǕġĒƛŢöƴĻŸƞūƴġƦƴƦƼŊƴġ mŊūŊƴġĚēöƛöĒŊŢŊƴŊġƦ͡ ŸƞŊļŊŭöŢŢǛĚġƦŊļŭġĚƴŸ öƼƴŸūöƴġĻƞŸūƴńġƼƦġƞ§„ß ̈ŭĚļġŭġƞöƴŊŸŭŸĻ öƼƴŸūöƴŊŭļĒƞŸǕƦġƞƦ ǔöŊŢöĒŢġŊŭöŢŢĒƞŸǕƦġƞ ġŭļŊŭġƦ͛!ńƞŸūŊƼū͒JġēŞŸ öŭĚàġĒjŊƴ͜ ēēġƦƦŊĒŢġŸŭŢǛŊŭ!ńƞŸūŊƼū öŭĚIŊƞġĻŸǚ ŢƦŸƼƦġĚĻŸƞĚġĒƼļļŊŭļ ƛƼƞƛŸƦġƦ͛ġ͌ļ͌!ńƞŸūġ (ġǔÀŸŸŢƦ͜ :$<672$8720$7($%52:6(5 %URZVHU$3,V :HE$3,V ̇ƦƴļġŭġƞöƴŊŸŭŸĻöƼƴŸūöƴŊŭļ ͛ŊŭŊƴŊöŢŢǛƼƦġĚĒǛ²ġŢġŭŊƼūŊŭ ̈̆̆̊͜ §ƞŸǔŊĚġƦĻƼŢŢēŸŭƴƞŸŢŸĻƴńġ ġǚġēƼƴŊŸŭġŭǔŊƞŸŭūġŭƴ ƼƴŸūöƴŊŸŭēŸūūöŭĚƦöƞġ ūŸƦƴŢǛġūƼŢöƴġĚ !ŸūġƦǕŊƴńŢŊūŊƴöƴŊŸŭƦ͇ġ͌ļ͌ ŭŸƦǕŊƴēńŊŭļǕŊŭĚŸǕƦŸƞ ēƞŸƦƦŸƞŊļŊŭŊIƞöūġƦƼƛƛŸƞƴ :HE'ULYHU3URWRFRO Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ
10. -DYD6FULSW$3, §ƞŸǚǛ ŊIƞöūġ
11. ̉ƞĚļġŭġƞöƴŊŸŭŸĻöƼƴŸūöƴŊŭļ ĒƞŸǕƦġƞƦ „ĻǫēŊöŢàġĒ²ƴöŭĚöƞĚ ĚġǔġŢŸƛġĚöƴà̉!Ŋŭö ēŸūūŸŭġĻĻŸƞƴĒǛöŢŢĒƞŸǕƦġƞ ǔġŭĚŸƞƦ ÀńŸƞŸƼļńŢǛƴġƦƴġĚöƦƛöƞƴŸĻ ƴńġǕġĒƛŢöƴĻŸƞūƴġƦƴƦƼŊƴġ mŊūŊƴġĚēöƛöĒŊŢŊƴŊġƦ͡ ŸƞŊļŊŭöŢŢǛĚġƦŊļŭġĚƴŸ öƼƴŸūöƴġĻƞŸūƴńġƼƦġƞ§„ß ̈ŭĚļġŭġƞöƴŊŸŭŸĻ öƼƴŸūöƴŊŭļĒƞŸǕƦġƞƦ ǔöŊŢöĒŢġŊŭöŢŢĒƞŸǕƦġƞ ġŭļŊŭġƦ͛!ńƞŸūŊƼū͒JġēŞŸ öŭĚàġĒjŊƴ͜ ēēġƦƦŊĒŢġŸŭŢǛŊŭ!ńƞŸūŊƼū öŭĚIŊƞġĻŸǚ ŢƦŸƼƦġĚĻŸƞĚġĒƼļļŊŭļ ƛƼƞƛŸƦġƦ͛ġ͌ļ͌!ńƞŸūġ (ġǔÀŸŸŢƦ͜ :$<672$8720$7($%52:6(5 %URZVHU$3,V -DYD6FULSW$3,V ̇ƦƴļġŭġƞöƴŊŸŭŸĻöƼƴŸūöƴŊŭļ ͛ŊŭŊƴŊöŢŢǛƼƦġĚĒǛ²ġŢġŭŊƼūŊŭ ̈̆̆̊͜ §ƞŸǔŊĚġƦĻƼŢŢēŸŭƴƞŸŢŸĻƴńġ ġǚġēƼƴŊŸŭġŭǔŊƞŸŭūġŭƴ ƼƴŸūöƴŊŸŭēŸūūöŭĚƦöƞġ ūŸƦƴŢǛġūƼŢöƴġĚ !ŸūġƦǕŊƴńŢŊūŊƴöƴŊŸŭƦ͇ġ͌ļ͌ ŭŸƦǕŊƴēńŊŭļǕŊŭĚŸǕƦŸƞ ēƞŸƦƦŸƞŊļŊŭŊIƞöūġƦƼƛƛŸƞƴ :HE'ULYHU3URWRFRO Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ
12. %URZVHU$3,
13. ̉ƞĚļġŭġƞöƴŊŸŭŸĻöƼƴŸūöƴŊŭļ ĒƞŸǕƦġƞƦ „ĻǫēŊöŢàġĒ²ƴöŭĚöƞĚ ĚġǔġŢŸƛġĚöƴà̉!Ŋŭö ēŸūūŸŭġĻĻŸƞƴĒǛöŢŢĒƞŸǕƦġƞ ǔġŭĚŸƞƦ ÀńŸƞŸƼļńŢǛƴġƦƴġĚöƦƛöƞƴŸĻ ƴńġǕġĒƛŢöƴĻŸƞūƴġƦƴƦƼŊƴġ mŊūŊƴġĚēöƛöĒŊŢŊƴŊġƦ͡ ŸƞŊļŊŭöŢŢǛĚġƦŊļŭġĚƴŸ öƼƴŸūöƴġĻƞŸūƴńġƼƦġƞ§„ß ̈ŭĚļġŭġƞöƴŊŸŭŸĻ öƼƴŸūöƴŊŭļĒƞŸǕƦġƞƦ ǔöŊŢöĒŢġŊŭöŢŢĒƞŸǕƦġƞ ġŭļŊŭġƦ͛!ńƞŸūŊƼū͒JġēŞŸ öŭĚàġĒjŊƴ͜ ēēġƦƦŊĒŢġŸŭŢǛŊŭ!ńƞŸūŊƼū öŭĚIŊƞġĻŸǚ ŢƦŸƼƦġĚĻŸƞĚġĒƼļļŊŭļ ƛƼƞƛŸƦġƦ͛ġ͌ļ͌!ńƞŸūġ (ġǔÀŸŸŢƦ͜ :$<672$8720$7($%52:6(5 %URZVHU$3,V -DYD6FULSW$3,V ̇ƦƴļġŭġƞöƴŊŸŭŸĻöƼƴŸūöƴŊŭļ ͛ŊŭŊƴŊöŢŢǛƼƦġĚĒǛ²ġŢġŭŊƼūŊŭ ̈̆̆̊͜ §ƞŸǔŊĚġƦĻƼŢŢēŸŭƴƞŸŢŸĻƴńġ ġǚġēƼƴŊŸŭġŭǔŊƞŸŭūġŭƴ ƼƴŸūöƴŊŸŭēŸūūöŭĚƦöƞġ ūŸƦƴŢǛġūƼŢöƴġĚ !ŸūġƦǕŊƴńŢŊūŊƴöƴŊŸŭƦ͇ġ͌ļ͌ ŭŸƦǕŊƴēńŊŭļǕŊŭĚŸǕƦŸƞ ēƞŸƦƦŸƞŊļŊŭŊIƞöūġƦƼƛƛŸƞƴ :HE'ULYHU3URWRFRO Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ Ɣ
14. JŸƴŸǪm &XUUHQW:HE'ULYHU3URWRFRO
15. ĚŸŭġ ̈̆̆ūƦ &XUUHQW:HE'ULYHU3URWRFRO
16. 1HZ:HE'ULYHU%LGL3URWRFRO
17. 1HZ:HE'ULYHU%LGL3URWRFRO Ɣ ²ƼƛƛŸƞƴĻŸƞūŸƞġ͛ĚġǔġŢŸƛġƞĻŸēƼƦġĚ͜ƦēġŭöƞŊŸƦ͇ġ͌ļ͌ ż yġƴǕŸƞŞ͒(„w͒!ŸŭƦŸŢġŊŭƴƞŸƦƛġēƴŊŸŭ ż wŸēŞŊŭļöŭĚXŭƴġƞēġƛƴŊŸŭŸĻŭġƴǕŸƞŞġǔġŭƴƦ ż ŸŸƴƦƴƞöƛhöǔö²ēƞŊƛƴŊŭġǚġēƼƴŊŸŭēŸŭƴġǚƴƦ Ɣ ēēġƦƦƴŸŭöƴŊǔġ ƞŸǕƦġƞ§XƦ XŭƴġƞŸƛġƞöĒŊŢŊƴǛǕŊƴńēŢöƦƦŊēöŢàġĒ(ƞŊǔġƞēŸūūöŭĚƦ Ɣ ūöēńŊŭġöŭĚńƼūöŭ͡ƞġöĚöĒŢġ§XƦƛġēŊǫēöƴŊŸŭ ļŊƴńƼĒ͌ēŸū͒Ǖ̉ē͒ǕġĒĚƞŊǔġƞ͡ĒŊĚŊ
18. [ wŸƞġXŭĻŸƞūöƴŊŸŭ0ǚēńöŭļġ ġƴǕġġŭÀġƦƴŭĚ ƞŸǕƦġƞ ͂ ƴńŊƦŊƦöǔġƞǛƞŸƼļńġƦƴŊūöƴġ ͂
19. &+$//(1*(6)25&/28'3529,'(5
20. &+$//(1*(6)25&/28'3529,'(5
21. Ɣ ƼƴŸūöƴŊŸŭƦēƞŊƛƴƦöƞġĒġŊŭļ ƞƼŭŭġǚƴƴŸƴńġƞġūŸƴġġŭĚ ͛ġ͌ļ͌ĒƞŸǕƦġƞ͜ ÀġƦƴēŸǔġƞöļġŊŭēƞġöƦġƦ ƴńƞŸƼļńŭġǕƴǛƛġƦŸĻƴġƦƴƦ͇ ġ͌ļ͌ƛġƞĻŸƞūöŭēġƴġƦƴŊŭļ XŭĻŸƞūöƴŊŸŭöĒŸƼƴƝƼöŢŊƴǛöƞġ ēöƛƴƼƞġĚƴńƞŸƼļńŸƼƴƴńġ ²(m! 3266,%/(9(1'25'(9(/230(176 4XDOLW\6LJQDOV 7HVW([HFXWLRQ 1HZ7\SHVRI7HVWV Ɣ Ɣ
22. RŸǕǕŊŢŢƴńġĻƼƴƼƞġŸĻĒƞŸǕƦġƞöƼƴŸūöƴŊŸŭŢŸŸŞŢŊŞġ͍ :KDWêVQH[W"
23. Ɣ àġĒ(ƞŊǔġƞ͡ ŊĚŊƛƞŸƴŸēŸŢĚġǔġŢŸƛūġŭƴġŭöĒŢġƦēƞŸƦƦĒƞŸǕƦġƞ öƼƴŸūöƴŊŸŭĒöƦġĚŸŭöŢŢ̉öƛƛƞŸöēńġƦ Ɣ wŸƞġǕġĒƦƴöŭĚöƞĚƦǕŊŢŢƦƴöƞƴƴŸƦńŊƛǕŊƴńöàġĒ(ƞŊǔġƞ ġǚƴġŭƦŊŸŭ͇ġ͌ļ͌ ż àġĒƼƴńġŭƴŊēöƴŊŸŭ͛Ǖ̉ē͒ǕġĒöƼƴńŭ͋̇̈̋̌͜ ż RÀwm͛ǕńöƴǕļ͒ńƴūŢ͋̉̆̊̍͜ ż ²ġŭƦŸƞ§X͛Ǖ̉ē͒ƦġŭƦŸƞƦ͋̉̌̏͜ ż ªġƛŸƞƴŊŭļ§X͛Ǖ̉ē͒ƞġƛŸƞƴŊŭļ͋̎̏͜ ż §ġƞūŊƦƦŊŸŭƦ§X͛Ǖ̉ē͒ƛġƞūŊƦƦŊŸŭƦ͋̇̋̇͜ Ɣ ²ƴöŭĚöƞĚƦǕŊŢŢēŸŭƴŊŭƼġƴŸƦƴöǛöƦŢŸǕƛƞŸēġƦƦ :KDWêVQH[W"
24. $QDXWRPDWLRQVROXWLRQEDVHGRQDSURSULHWDU\SURWRFRO ZLOODOZD\VEHOLPLWHGLQWKHUDQJHRIEURZVHUVLWFDQ VXSSRUW7KHVXFFHVVRIWKHZHELVEXLOWRQPXOWLYHQGRU VWDQGDUGV,WêVLPSRUWDQWWKDWWHVWWRROLQJEXLOGVRQ VWDQGDUGVDVZHOOVRWKDWWHVWVZRUNDFURVVDOOWKH EURZVHUVDQGGHYLFHVZKHUHWKHZHEZRUNV ͝wöśöIƞǛĚƞǛēńŸǕŊēǥ͒höūġƦJƞöńöū ńƴƴƛƦ͆͒͒ńöēŞƦ͌ūŸǥŊŢŢö͌Ÿƞļ͒̈̆̈̇͒̆̇͒ŊūƛƞŸǔŊŭļ͡ēƞŸƦƦ͡ĒƞŸǕƦġƞ͡ƴġƦƴŊŭļ͡ƛöƞƴ̈͡͡ŭġǕ͡öƼƴŸūöƴŊŸŭ͡ĻġöƴƼƞġƦ͡Ŋŭ͡ǫƞġĻŸǚ͡ŭŊļńƴŢǛ͒
25. !ª0(XÀ²͆ÀńŊƦƛƞġƦġŭƴöƴŊŸŭƴġūƛŢöƴġǕöƦēƞġöƴġĚĒǛ ²ŢŊĚġƦļŸ͇ŊŭēŢƼĚŊŭļŊēŸŭƦĒǛIŢöƴŊēŸŭ͇ŊŭĻŸļƞöƛńŊēƦτ ŊūöļġƦĒǛIƞġġƛŊŞ͌ 7KDQN \RX ŭǛƝƼġƦƴŊŸŭƦ͍ σēńƞŊƦƴŊöŭ͡ĒƞŸūöŭŭ σĒƞŸūöŭŭ