인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
Programming

/

Front-end

Front-end testing for practical use - Part 2. Testing in depth: Visual regression and E2E testing

In this course, you will learn about the general types of front-end testing and how to write reliable tests by selecting the appropriate test for the situation.

(5.0) 12 reviews

517 students

Software Test
JavaScript
e2e
vitest
chromatic
Thumbnail

This course is prepared for Basic Learners.

What you will learn!

  • Important concepts needed for writing tests

  • How to write front-end tests that can increase the trust in the code you write

  • How to write snapshot tests using vitest

  • How to write visual regression tests using Storybook and Chromatic

  • How to write E2E tests using Cypress

🎊 Events 🎊

If you have taken Part 1, you will receive a 40% discount coupon for Part 2!

For those who have taken all of Part 1, I am sharing a coupon that will allow you to purchase Part 2 at a 40% discount . Please access the article below and use the coupon before purchasing!
📌 Article Link : https://bit.ly/3He9fry
This post is only visible to Part 1 buyers.


We provide tuition support for students and job seekers 💪

For students or job seekers without income, if you fill out the form and submit it, we will give you a 50% discount coupon. If the application link is open, you can apply. We support your studies. Fighting 🔥
📌 Application link : https://forms.gle/ohs7KywvSGXoJXGM7
This may be a bit difficult for those who are just starting to study FE. Make sure to check your prior knowledge before taking the course!

With the know-how of writing tests for various services over many years in the field,
We'll tell you everything about front-end testing!

These worries
Aren't you doing it? 🤔

comma30

Front-end testing is
What are you verifying?
I'm curious

comma30

Directly from the device by hand
The test is
It's too repetitive and hard

comma30

Written in practice
Real front-end testing
I'm curious

🤔 Are you feeling somewhat comfortable building apps, but worried about whether they'll actually work in a production environment ?
🤔 Do you really need testing, but there are so many different front-end tests that you don't feel like getting started ?
🤔 Have you ever wanted to validate and automate more while sticking to specific test types ?
🤔 Have you ever wanted to get a clearer idea of what tests to write and what the purpose of the tests is?

If you have these concerns, you've come to the right place!
I recommend " Front-end testing that can be applied directly to practice ."

Front-end practitioners in the field
The course you recommended 👍

“This is a lecture where you can learn everything from the necessity of test code to various types of testing concepts and utilization methods. Those who are not yet familiar with testing can learn the concept of testing through the lecture, and those who have previously written test code can learn more effective and meaningful test code through the examples and practice in the lecture and apply it to their work.”

- Curly Frontend Developer Yoo Kyung-sang

“When writing test code, there are moments when you need to convince yourself. ‘Will the test delay the development schedule?’ ‘Is it right to test this?’ ‘Should I test content that will be changed in the future?’

This lecture shows you how to strategically test a simple shopping mall site with various techniques. After watching the video, I think you will be able to write test code that you can understand with confidence. I hope that many people will watch this video and gain confidence in testing.”

- Line Plus Frontend Developer Lee Sang-cheol

“This lecture is based on practical examples that cover everything from why you should write test code to how to write it. Test code is an essential part of a reliable application, but I always had a lot of concerns about what to test and how to test it. It was very helpful because it neatly organized and explained the standards and methods.”

- Line Plus Frontend Developer Eunbin Kim

Through this course, you will understand the purpose of various front-end tests and create a complete and robust app. 😍

Various front-end tests
The best courses to learn in one go 🚀

In this course, you will learn unit, integration, snapshot, visual regression, and E2E tests quickly and easily using projects similar to real-world situations in Part 1 and Part 2. You will understand the strengths and limitations of each test, and build the ability to build your own workflow by clearly understanding the purpose of the test.

Key Point of the Lecture !

Key Image 1

Starting with the important concepts, step by step

Explains the need for testing and the common test writing rules and concepts you should know.

Key Image 2

Even if there are concepts that you are encountering for the first time

We will clearly communicate the purpose of using each tool and API, and carefully look at the definition of each test type and how to select a target.

Key Image 3

So that you can learn on your own

We help you learn by providing examples and answers so you can write your own tests based on what you've learned.

Key Image 4

Similar to practice

We provide example projects so that you can learn grammar and tools by writing tests based on examples of shopping malls that communicate with actual server environments and easily apply them in practice.

Part 2 consists of six sections in total.
It consists of 📚

Section 1.
With TDD

Frontend Testing

TDD Image

📌 Learn about test-driven development from a front-end perspective.
📌 Let’s apply the unit and integration tests learned in Part 1 together with TDD.

Section 2.
Snapshot test

Snapshot test image

📌 Learn about snapshot testing.
📌 Learn how to write snapshot tests using vitest.
📌 Learn how to manage snapshot testing.
📌 Let’s take a look at the limitations of snapshot testing.

Section 3.
Visual regression testing using storybooks and chromatic

Screenshot 2023-12-05 6.24.06 AM

📌 Let's take a look at how to write a storybook for UI testing and what to write about.
📌 Let’s look at the concept of visual regression testing.
📌 Let's take a look at how to write visual regression tests using Chromatic.
📌 Let's create a visual regression testing workflow together by integrating with Github Actions.
📌 Let’s look at the limitations of visual regression testing.

Section 4.
What is E2E testing?

Screenshot 2023-12-09 3.00.39 PM

📌 Introduces the concept of E2E testing and important considerations when writing it.
📌 Install Cypress and use it to write E2E tests.
📌 Learn about the core concepts that make up Cypress, such as queries, commands, and retry-ability, and look at the APIs used while writing E2E tests together.

Section 5.
Using Cypress
Writing E2E tests

Screenshot 2023-12-09 3.11.42 PM

📌 Learn the concepts of custom commands and queries and write them together.
📌 Learn how to use sessions, intercepts, etc. to speed up testing and improve limited environments while writing E2E tests together.
📌 Dive deeper into the concept of test doubles.
📌 Let’s look at the limitations of E2E testing.

Section 6.
finish

Screenshot 2023-12-12 1.18.52 PM

📌 Let’s review the tests we learned in Parts 1 and 2.
📌 Based on this, we consider testing strategies suitable for various situations.

Related Lectures 📺

11.001

Front-end testing that can be applied directly to practice

Part 1. Testing Basics: Unit and Integration Testing

Link: https://inf.run/ba6qp

Expected Questions Q&A 💬

Q. Can I take the course on either Windows or MacOS?
A.
Yes, you can. The course will be conducted on MacOS and will be conducted in VS Code and browser (Chrome) environments.

Q. Where can I find the study materials?
A.
Lecture materials are included in the lecture, and example code can be found on GitHub .

Q. Is there any knowledge I need to know before attending the lecture?
A.
Basic knowledge of JavaScript (ES6) and React is required. Since this lecture talks about testing, the introduction to the technologies used in the project is simple, but you must learn the specific usage yourself. It is used at a level that is not difficult, so you can follow along slowly while learning the technologies used.

Q. Can I take any section I want first, regardless of the order?
A.
This lecture sequentially explains the concept of testing, how to write each test, its limitations, and introduces new testing methods to overcome limitations. Therefore, we recommend that you study sequentially from the previous sections.

Q. Are parts 1 and 2 consecutive lectures?
A.
Yes. The lecture proceeds with the same example project, and the content introduced in Part 1 is not introduced again in Part 2. If possible, we recommend studying Part 1 and Part 2 together.

Recommended for
these people!

Who is this course right for?

  • Anyone who wants to feel confident in the code they write through testing

  • Anyone who wants to automate repetitive manual verification through testing

  • For those of you who have ever wondered what front-end testing verifies

  • Anyone who wants to learn multiple front-end test types at once and build a workflow that integrates them appropriately.

Need to know before starting?

  • JavaScript

  • CSS HTML

  • React

Hello
This is

1,350

Students

66

Reviews

60

Answers

5.0

Rating

2

Courses

코드 조커

기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
11년차 프런트엔드 개발자
(현) 글로벌 컨텐츠 회사 FE 개발 부문 팀장
(전) NHN TOAST Cloud FE 개발 팀장
(전) 삼성 SDS FE 개발자

오프

기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
7년차 프런트엔드 개발자
(현) 글로벌 메신저 회사 FE 개발자
(전) NHN TOAST UI 오픈소스 개발자

Curriculum

All

23 lectures ∙ (3hr 59min)

Lecture resources

are provided.

  • 1.1. What is Test Driven Development (TDD)?

    06:52

Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!