Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

1日でCypressで書くJavaScript E2Eテストコード

フロントエンドはユーザーとの接点が行われるところなので、開発者の立場ではなく、ユーザーの立場でのテストが非常に重要です。 E2Eテストでユーザーシナリオが正常に動作していることを確認し、私のコードについて恐怖に自信を持って体験してください!

3시간 만에 완강할 수 있는 강의 ⏰
Cypress
Software Test

こんなことが学べます

  • サイプレス

  • フロントエンドE2Eテスト

  • フロントエンドのテストタイプ

コード作成の恐れ、E2Eテストで震えてみてください!

JavaScriptコードを絞りながら
こんな悩みが聞こえませんか?

😅この関数を削除しても大丈夫でしょうか?
🧐繰り返し機能テストをすばやく行うことはできませんか?
🤔私のコードをどのように検証しますか?

開発者は、作成したプログラムのクオリティに対して責任があります。そのため、QAに機能テストを渡す前に基本要件をすべて満たしているかどうかの検証は、開発者自身が行うことができなければなりません。信頼できる自動化テストで、自分のコードに自信を持って体験してください!


FEテスト入門者のため
Cypress E2Eテストレッスン。 💡 

勇気は恐れのない状態ではありません。
真の勇気とは恐れにもかかわらず行動する状態だ。
- ゲーテ

フロントエンドのテストコードを組むべきという恐怖を、自信に変える経験を「一緒に」作っていきます。


こんな方へ
役に立つと思います!

基本的なJavaScriptの概念を知っている人

テストコードに渇きがある方

初めてフロントエンド学習をしてみると画面UI機能開発に集中するため、テストコードに対する漠然とした恐れがある場合があります。 E2Eテストツールを使用して、ユーザーシナリオをクライアントでテストする動作を一緒に練習する予定です。

🔭この講義を聞いたら?

  • テストコードを書く恐れがなくなります。
  • ユーザーのシナリオに従って、私が書いたアプリを繰り返し可能にテストできます。

こんな点が違います!

逆さま
学習します。

この講義を聞く理由は、テストコードを書いてアプリの機能を検証するためです。そのため、アプリの機能検証を最初に行い、理論を後で学習します。

テストコードを書く
1サイクルを経験します。

メソッドや、使用方法について最初から詳しく説明するのではなく、テストコードを書く全体のサイクルをまず経験します。

テストコード自体
集中できるように。

機能がすでに実装されているアプリがあります。だからあなたは最初にテストコードを書くことに集中するだけです。


自分で作ってみてください! 📚

1. カウンターアプリ

📔 リポジトリ: https://github.com/blackcoffee-study/js-counter-test
💻デモ:https://blackcoffee-study.github.io/js-counter-test/

カウンターアプリのプラス、マイナス、リセット機能をテストします。機能を直接実装しても大丈夫で、テスト自体に集中したい場合は、機能が実装されたブランチでテストのみ作成してみてください!

2.電卓アプリ

📔 リポジトリ: https://github.com/blackcoffee-study/js-calculator-test/tree/main
💻デモ:https://blackcoffee-study.github.io/js-calculator-test/

四則演算などの基本的な電卓機能をテストします。


質問がありますか?

Q. JavaScriptの初心者が聞いても大丈夫ですか?

はい、もちろんです。本当にJavaScriptの初心者のための簡単なアプリを用意し、機能実装ではなくテスト自体に集中できるブランチを別に用意したので参考にしてください!

Q. 参考にできるテストコードがありますか?

メーカージュンのすべてのミッションは独自のスタディでも扱います。スタディワンの方が投稿したPRを通じて他の方のコードも参考にしていただけます。

Q. この講義はTDDも学びますか?

TDD(Test Driven Development)を学ぶには、TDDの哲学の理解と、機能の実装までより多くの部分を扱う必要があります。今回の講義はテストコードに「おなじみ」になり、テストコードを「作成してみる経験」のためにわざわざ関連した内容は除外しました。 TDDとより耐性のあるテストコードの話は、後続の講義で会いましょう!


メーカージュン紹介😆

明るいエネルギーで一緒に成長する「環境」を作るメーカージュンです。
メーカージュンの詳細については、メーカージュンのプロフィールページで詳しく見ることができます!

🔗関連リンク


こんな方に
おすすめです!

学習対象は
誰でしょう?

  • 繰り返しクリックしてテストする方

  • 作成したアプリケーションでどのような機能が動作するかを具体的な数値で表現したい方

  • JavaScriptで簡単なアプリを作成できる方

前提知識、
必要でしょうか?

  • バニラJavaScript

こんにちは
です。

525

受講生

51

受講レビュー

3

回答

4.9

講座評価

1

講座

밝은 에너지로 
함께 성장하는 '환경'을 만듭니다.

 

カリキュラム

全体

11件 ∙ (45分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

51件

4.9

51件の受講レビュー

  • 김동원님의 프로필 이미지
    김동원

    受講レビュー 1

    平均評価 5.0

    5

    73% 受講後に作成

    테스트 코드에 대해 막연한 두려움이 있었는데 실습을 통해 테스트 코드 작성을 경험할 수 있습니다. 또 테스트의 개념과 필요한 이유를 제대로 배울 수 있었어요. 다음 BDD나 TDD 강의가 얼른 나왔으면 좋겠습니다!

    • 메이커준
      知識共有者

      열심히 다음 강의 준비하고 있으니, TDD로 프론트엔드 애플리케이션 만드는 경험 같이 진행해볼 수 있도록 할게요!

  • 정한영님의 프로필 이미지
    정한영

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    UI테스트에 대해 궁금한 점이 많았는데 이 강의를 통해서 해소할 수 있었던 것 같습니다! 잘 들었습니다~

    • 메이커준
      知識共有者

      한영님 감사합니다~! UI테스트에 대해 후속 강의에서 더 깊이있게 다룰 수 있도록 해볼게요!

  • 인프런님의 프로필 이미지
    인프런

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    테스트 코드 입문자도 쉽고 재미있게 배우고 따라할 수 있으면서도 유익한 강의입니다:)

    • 메이커준
      知識共有者

      우현님 친절한 리뷰 감사드립니다! 언제든 피드백 주시면 더 좋은 내용으로 업데이트할게요~!

  • Grace Lee님의 프로필 이미지
    Grace Lee

    受講レビュー 1

    平均評価 4.0

    4

    100% 受講後に作成

    중간중간 결과 화면이 달라지거나 강의와 다르게 나오는 부분들 때문에 한참을 버벅였지만 수업 자체는 알찼던거 같아요. 일단, 이론을 먼저 구구절절 하는 강의와는 다르게 예제를 먼저 진행한 것 부터 너무 좋았던거 같아요~

    • 정훈님의 프로필 이미지
      정훈

      受講レビュー 50

      平均評価 5.0

      5

      100% 受講後に作成

      너므 좋은강의였습니다

    似ている講座

    同じ分野の他の講座を見てみましょう!