Making your UI tests resilient to changeOctober 7th, 2019 — 6 min read You're a developer and you want to avoid shipping a broken login experience, so you're writing some tests to make sure you don't. Let's get a quick look at an example of such a form: const form = ( <form onSubmit={handleSubmit}> <div> <label htmlFor="username">Username</label> <input id="username" className="username-field" />
![Making your UI tests resilient to change](https://cdn-ak-scissors.b.st-hatena.com/image/square/20af6864174b65b38cf5ed7f0908d60bf427a1bd/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fkentcdodds-com%2Fimage%2Fupload%2F%24th_1256%2C%24tw_2400%2C%24gw_%24tw_div_24%2C%24gh_%24th_div_12%2Fco_rgb%3Aa9adc1%2Cc_fit%2Cg_north_west%2Cw_%24gw_mul_14%2Ch_%24gh%2Cx_%24gw_mul_1.5%2Cy_%24gh_mul_1.3%2Cl_text%3Akentcdodds.com%3AMatter-Regular.woff2_50%3ACheck%252520out%252520this%252520article%2Fco_white%2Cc_fit%2Cg_north_west%2Cw_%24gw_mul_13.5%2Ch_%24gh_mul_7%2Cx_%24gw_mul_1.5%2Cy_%24gh_mul_2.3%2Cl_text%3Akentcdodds.com%3AMatter-Regular.woff2_110%3AMaking%252520your%252520UI%252520tests%252520resilient%252520to%252520change%2Fc_fit%2Cg_north_west%2Cr_max%2Cw_%24gw_mul_4%2Ch_%24gh_mul_3%2Cx_%24gw%2Cy_%24gh_mul_8%2Cl_kent%3Aprofile-transparent%2Fco_rgb%3Aa9adc1%2Cc_fit%2Cg_north_west%2Cw_%24gw_mul_5.5%2Ch_%24gh_mul_4%2Cx_%24gw_mul_4.5%2Cy_%24gh_mul_9%2Cl_text%3Akentcdodds.com%3AMatter-Regular.woff2_70%3AKent%2520C.%2520Dodds%2Fco_rgb%3Aa9adc1%2Cc_fit%2Cg_north_west%2Cw_%24gw_mul_9%2Cx_%24gw_mul_4.5%2Cy_%24gh_mul_9.8%2Cl_text%3Akentcdodds.com%3AMatter-Regular.woff2_40%3Akentcdodds.com%25252Fblog%25252Fmaking-your-ui-tests-resilient-to-change%2Fc_fill%2Car_3%3A4%2Cr_12%2Cg_east%2Ch_%24gh_mul_10%2Cx_%24gw%2Cl_unsplash%3Aphoto-1492567291473-fe3dfc175b45%2Fc_fill%2Cw_%24tw%2Ch_%24th%2Fkentcdodds.com%2Fsocial-background.png)