Name: 端到端測試的組件化 - 尼古拉斯-波爾 - 美國2019年JSConf。 (Componentizing end-to-end tests - Nicholas Boll - JSConf US 2019)
Uploaded: 2021-01-14T10:25:15.000Z
Duration: 24 min 9 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

Componentizing End-to-End Tests - Nicholas Boll

All right, so for our next speaker, we have Nicholas Boll, talking about componentizing

>> All right, starting a little bit early.

OK, all right, I'm talking about componentizing end to end tests, so, this is my first time

being at a conference speaking, so -- AUDIENCE: Whoo!

Thank you, so I'm going to start with some ice-breaker questions that will make me feel

So who here has written web applications?

So who writes end to end tests using Cypress, Selenium, etc.?

All right, so who thinks they're easy to write, debug or maintain?

All right, so I'm going to put a statement out there that writing end to end tests is

So one thing is figuring out how to select something.

Do you use -- there's all kinds of different things?

Do you even control what they are going to be?

Race conditions, both in your applications and also maybe in your test runner.

I know that's for the last five years at a company, we had an offshore doing our end

to end tests for us, and they were -- they had an entire team just trying to keep those

running, so the tests were constantly breaking.

Now that I've postulated all of that, I'm Nicholas Boll, I'm a design system engineer

I'm an engineer on the design system to Workday.

So how do we break down our applications, because we have to build complex applications,

So this is just a screenshot that I took from Essentia's website.

It's a complex application of just like a dashboard, some menu items, and stuff.

So we probably try and visualize how we would break this down and we'll probably draw boxes

And obviously this application has multiple widgets, those widgets have titles.

I had some color coding so the menu has menu items and I've outlined that with purple and

widgets I've outlined with red and the titles I've outlined with yellow.

So you can see these patterns of repeating piece that is repeat over and over again,

and this big problem was broken down into small pieces and built up to make this complex

So we might choose the first option I had, which was a selector.

You can see the numbers in brackets, like 3, that's the third div under the body and

there was a second div under that one and then they anchor tagged.

That was a problem we had with our offshore team.

They tried to figure what selector would be best.

Obviously Xpath tried too often, so they tried class names.

So another option might be like a data test ID.

That is something that we could control and it made it a little bit more obvious that

that was something specifically for testing so that developers didn't accidentally change

But then the next question is where do these selectors go?

So one option is co-located with your source code.

That seems like a pretty obvious choice, I've got the import React statement at the top

and I've just name it data test ID email so now you can grab that selector and you can

You can see that that's matched to the ID inside that email component.

So it's very easy at the unit testing level.

It could be bad for end to end testing, so I don't work for Cypress, but I've contributed

there, so they gave me a nice t-shirt so if you do this in a Cypress test the way they

do that is every test becomes its own application that it wraps up -- it injects itself into

your application's page, so what ends up happening is instead of just grabbing all of your test

code, it also is now grabbing the whole of React, so that can be bad.

It will slow down your test, because it has to compile and parse and all that the entire

So the next thing that we tried doing was doing a global selectors file where we just

listed out and tried to add names to all the selectors.

字幕列表影片播放

端到端測試的組件化 - 尼古拉斯-波爾 - 美國2019年JSConf。 (Componentizing end-to-end tests - Nicholas Boll - JSConf US 2019)

obvious

content

multiple

grab