-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
221 lines (218 loc) · 7.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<html>
<head>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Painless E2E testing</h2>
<h3>with </h3>
<img src="assets/cypress-logo.png" class="cypress-logo" />
</section>
<section>
<h2>Hello!</h2>
<h3>My name is Ostap</h3>
</section>
<section>
<section>
<h2>Let's talk about testing</h2>
</section>
<section>
<h2>Why i'm think i have competence ?</h2>
<section id="fragments">
<ul>
<li class="fragment">start career as QA</li>
<li class="fragment">grow up to QA automation</li>
<li class="fragment">write my own "test framework"</li>
<li class="fragment">a lot of time debug my own "test framework"</li>
<li class="fragment">know why selenium
<strong>sucks</strong>
</li>
<li class="fragment">...</li>
<li class="fragment">my wife is an QA automation </li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h2>What is E2E testing?</h2>
<section id="fragments">
<ul>
<li class="fragment">AngularJS bazzword</li>
<li class="fragment">Can be understanded as acceptance testing</li>
<li class="fragment">Writing "acceptance" word is too long...</li>
<li class="fragment">E2E naming is blessed to be hyped</li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h2>OK.. what is acceptance testing?</h2>
<section id="fragments">
<ul>
<li class="fragment">No isolation</li>
<li class="fragment">No mocking</li>
<li class="fragment">Test real system</li>
<li class="fragment">Means: Open browser and click on elements</li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h2>Wait but, my E2E lib is...</h2>
<section id="fragments">
<ul>
<li class="fragment">Nightwatch</li>
<li class="fragment">Protractor</li>
<li class="fragment">webdriver.io</li>
<li class="fragment">TestCafé</li>
<li class="fragment">Nemo</li>
<li class="fragment">selenium-webdriver</li>
<li class="fragment">...</li>
</ul>
</section>
</section>
</section>
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
<h2>... is suck?</h2>
</section>
<section>
<h2>Because of — SELENIUM</h2>
<img src="./assets/selenium-logo.png"></img>
<br />
<br />
</section>
<section>
<section>
<h2>What word "selenium" means for you</h2>
<section id="fragments">
<ul>
<li class="fragment">That debugging is a hell</li>
<li class="fragment">That you definetly needs drivers for browsers</li>
<li class="fragment">That you need to keep driver version updated</li>
<li class="fragment">That you need some bindings to use selenium</li>
<li class="fragment">That it is unstable</li>
<li class="fragment">That it is hard to setup on Windows</li>
<li class="fragment">That startup/testing time is huge</li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h2>Why Cypress</h2>
<small>(at least for me)</small>
<section id="fragments">
<ul>
<li class="fragment">Javascript framework</li>
<li class="fragment">No Selenium at all</li>
<li class="fragment">Runs with your application loop</li>
<li class="fragment">Debugging is a first class citizen</li>
<li class="fragment">Built-in tons of features</li>
<li class="fragment">No configuration required</li>
<li class="fragment">Is for devs and QAs</li>
<li class="fragment">Fast</li>
<li class="fragment">Have great documentation</li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h2>Why it is painless? </h2>
<section id="fragments">
<p>Because you are not thinking of:</p>
<ul>
<li class="fragment">Setuping dev environment</li>
<li class="fragment">Deciding on test runner (karma, mocha, jasmine, qunit) </li>
<li class="fragment">Deciding on assertion library (chai, expect) </li>
<li class="fragment">Deciding on mocking (sinon, testdouble)</li>
<li class="fragment">Structuring your tests</li>
<li class="fragment">Waiting for elements on the page</li>
<li class="fragment">Running stuff on Continious Integraion or pre commit</li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h2>You may know</h2>
<quote>That the first selling feature of Redux was</quote>
<br />
<h4>time travel?</h4>
</section>
<section>
<h2>It here, also!</h2>
<iframe src='//gifs.com/embed/cypress-time-travel-6R0NgO' frameborder='0' scrolling='no' width="100%" height="100%"></iframe>
</section>
<section>
<h2>Why time travel matters on writing tests ?</h2>
<small>(Probably you never wrote a test)</small>
</section>
</section>
<section>
<section>
<h2>Cypress have all stuff needed out of the box</h2>
</section>
<section>
<h2>Environment variables</h2>
<img src="assets/cypress-env.png" />
</section>
<section>
<h2>Custom commands</h2>
<img src="assets/cypress-commands.png" />
</section>
<section>
<h2>API testing</h2>
<img src="assets/cypress-api.png" />
<small>* CORS is bypassed</small>
</section>
<section>
<h2>Server mocks</h2>
<img src="assets/cypress-server-mocks.png" />
</section>
<section>
<h2>Generated project structure</h2>
<img src="assets/cypress-project-struct.png" />
</section>
<section>
<h2>Easy explicit wait</h2>
<img src="assets/cypress-explicit-wait.png" />
</section>
<section>
<h2>And a lot more</h2>
<ul>
<li>.debug() keyword</li>
<li>Screenshots & videos</li>
<li>Dashboard service with recorded tests
<small>(paid)</small>
</li>
<li>Moment, lodash, jquery, minimatch prebundled</li>
<li>Webpack, typescript, broserify plugins </li>
<li>jUnit reporting</li>
<li>And a lot, a lot more</li>
</ul>
</section>
</section>
</section>
<section>
<section>
<h3>Just Type in your terminal</h3>
<section id="fragments">
<img class="fragment" src="assets/cypress-install.png" />
<div class="fragment">
<h3>And happy hacking!</h3>
<small>(`npx` requires NodeJS 9 or higher)</small>
</div>
</section>
</section>
</section>
</div>
</div>
<img src="assets/logo.png" class="striker-logo" />
<script src="index.js"></script>
</body>
</html>