Visual Testing Handbook
  • 소개
  • 작업 흐름(Work Flow)
  • 시각적 TDD
  • 자동화
  • 마무리
Framework:
React

마무리

시각적 버그들에 안녕을

개발자들은 그들이 가진 시간 중 21%를 버그를 고치는데 씁니다. UI 외관을 디버깅하는 건 특히 좌절스러울 수 있습니다. 재생산(Reproduction)을 하기위해서는 다양한 브라우저를 실행하고, 앱을 올바른 상태로 만들고, DOM을 통과해야 합니다. 판돈도 더 커지는데 - QA에서 잡히지 않은 버그를 수정하는 비용은 QA보다 프로덕션에서 수정하는데 5-10배더 많은 시간이 소요됩니다.

수천 개의 프런트엔드 팀들이 스토리북(Storybook)을 이용해 시각적 테스트를 하는 건 이제 상식입니다. 스토리북은 컴포넌트를 구축하고 시각적 테스트를 작성하는 데 도움이 됩니다. 컴포넌트 수준에서 테스트를 실행하면 버그의 근본 원인을 정확히 짚을 수 있습니다. 이미지 스냅샷을 찍으면 회귀 에러를 자동으로 포착하는 데 도움이 됩니다. 이는 사람들이 몰래 끼어든 버그들을 걱정하지 않고 UI를 전달할 수 있음을 의미합니다.

이 가이드를 통해 시각적 테스팅의 기본을 소개했습니다. Tom과 나는 여러분이 이번에 배운 내용들을 바탕으로 자신만의 프로젝트들을 만들어보길 희망합니다. 스토리북 메일링 리스트에 가입하셔서 더 유용한 글과 가이드 소식들을 받아보세요.

이 튜토리얼의 샘플 코드

지금까지 잘 따라왔다면, 당신의 저장소와 배포한 스토리북은 다음과 같이 보여야 합니다.

더 많은 자료들

더 깊이 파고들고 싶나요? 여기 유용한 추가 자료들이 있습니다 -

Is this free guide helping you? Tweet to give kudos and help other devs find it.
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify