If you are still not using screenshot testing — you definitely must give it a try! In this talk, Sergey will go through the advantages and limitations of screenshot testing. He will explain how to integrate it into CI process and share his experience of implementing screenshot testing at Wix.

2. Sergey Puzankov
▸Yandex
▸Luxoft, GettyImages
▸Wix
▸Front-end Science

4. MANUAL
TESTING

5. UI Testing

6. UI Testing

7. TESTING
AUTOMATION

8. Automation done right

9. Unit testing
Functional testing
Integration testing
E2E testing

10. Snapshot testing

11. Snapshot != Screenshot

12. <div class=“popup opened”>

13. Why
screenshot
testing?
00

18. .toMatchScreenshot({key: ‘some_id’})

19. Run tests
on stable data
01

21. API
UI

22. API
UI
MOCK API

23. GET http://site.com/api/assets/000-000-001/versions/
DELETE http://site.com/api/assets/000-000-001/versions/

24. GET http://site.com/api/assets/000-000-001/versions/

25. Test on
Live data
02

26. API
PRODUCTION
DB

27. API
PRODUCTION
DB
ETHALON
SCREENSHOTS

28. API
RELEASE
PRODUCTION
DB
ETHALON
SCREENSHOTS

29. API
RELEASE
PRODUCTION
DB
RELEASE
SCREENSHOTS
ETHALON
SCREENSHOTS

30. Test
responsiveness
03

32. 'desktop-chrome': {
windowSize: '1280x768',
desiredCapabilities: {
browserName: 'chrome'
}
}

33. changeOrientation()
PORTRAIT or LANDSCAPE

34. How to
speedup tests
04

35. wait(milliseconds)

36. wait(milliseconds)
SLOW

37. waitForElementToShow(selector, [timeout])
FAST

38. waitForElementToHide(selector, [timeout])

39. waitForJSCondition(function(window), timeout)

40. E2E + Screenshot

41. Coverage
05

42. Check coverage

43. Run tests
on different OS
06

46. HTTP SERVER
LOCALHOST:8080
BROWSER
LOCALHOST:4444TEST FRAMEWORK
LOCALHOST

47. LOCALHOSTDOCKER
HTTP SERVER
APPLICATION:8080
BROWSER
LOCALHOST:4444
LOCALHOST
TEST FRAMEWORK

48. Run tests
on Selenium greed
services
07

49. Platforms

50. Local grid

51. Remote grid

52. Tunnel

53. Integrate in CI
08

57. Problems
09

58. Cursor

59. Animations

60. Video

61. Gifs

62. Drag’n’Drop from outside of the
browser edge

63. Browser plugins

64. Important notes
10

65. Screenshot testing not replacement
for E2E testing!

66. Don’t try to shot every
small part of you UI
Remember 20/80 rule!

67. And don’t screenshot whole page!

69. Ignore dynamic areas

70. Ignore dynamic areas
ignoreElements('.selector1', {every: '.selector2'}, ...)

71. How to test components
hidden state?

74. Thank You!
sergiip@wix.com