本文へスキップ
Future Tech Blog
フューチャー技術ブログ
メニュー
カテゴリ
カテゴリ
開発
Programming
327
Frontend
134
Mobile
57
IoT
52
VR
20
基盤
DevOps
134
Cloud
77
DB
70
Infrastructure
70
IaC
57
AI
DataScience
100
AIDD
49
DataEngineering
45
セキュリティ
Security
36
認証認可
24
ビジネス
Culture
131
Business
50
Management
48
連載
連載
人気の連載
秋のブログ週間2025
Go1.26リリース
Go1.27リリース
春の入門祭り2025
春の入門祭り2024
AI Tips
連載一覧へ
リソース
リソース
フューチャーのガイドライン
設計ガイドライン・コーディング規約
仕事ですぐに使えるTypeScript
(外部サイト)
実務向けの実践テキスト
OSS / ツール
(外部サイト)
Cheetah Grid / uroboroSQL / Vuls
アクティビティ
アクティビティ
HACK TO THE FUTURE
フューチャー主催のプログラミングコンテスト
Future Tech Cast
技術ブログ発のポッドキャスト
アドベントカレンダー
2015年からの歴代一覧
表示テーマ: 端末の設定に従う。切り替える
表示テーマ: 明るい。切り替える
表示テーマ: 暗い。切り替える
検索を開く
人気のタグ
Go言語
265
ガイドライン
23
設計
44
AWS
136
Python
60
Docker
40
PostgreSQL
29
生成AI
26
Java
41
Claude
16
タグ一覧へ
ホーム
タグ
E2Eテスト
タグ
よく読まれている記事
イチ押し。Playwrightの快適機能
2023.08
♡
17
Cypress入門~初心者でも簡単にE2Eテストが作れる~
2021.04
♡
65
Playwright連載始まります
2023.08
♡
69
Playwrightでなぜかボタンにヒットしない
2024.10
♡
3
[入門]Webフロントエンド E2E テスト を出版しました
2024.07
♡
22
ChatGPTでE2Eテストコード自動作成
2023.09
♡
9
よく使われるカテゴリ
Frontend
13本
新着記事
全15本
Playwrightでなぜかボタンにヒットしない
getByRoleでボタンがヒットしないです、という相談を受けて調べた内容のメモです。次のようなHTMLになっていました。
2024.10.24
Frontend
Xでポストする:Playwrightでなぜかボタンにヒットしない
Facebookでシェアする:Playwrightでなぜかボタンにヒットしない
はてなブックマークで見る:Playwrightでなぜかボタンにヒットしない(1ブックマーク)
1
Pocketに保存する:Playwrightでなぜかボタンにヒットしない(2保存)
2
[入門]Webフロントエンド E2E テスト を出版しました
[入門]Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで をフューチャーの有志と共に出版いたしました。
2024.07.01
Frontend
Xでポストする:[入門]Webフロントエンド E2E テスト を出版しました
Facebookでシェアする:[入門]Webフロントエンド E2E テスト を出版しました
はてなブックマークで見る:[入門]Webフロントエンド E2E テスト を出版しました(14ブックマーク)
14
Pocketに保存する:[入門]Webフロントエンド E2E テスト を出版しました(8保存)
8
アクセシビリティに考慮した出力値のHTMLマークアップ
以前書いたCypressの記事で、アクセシビリティ情報を使うことで壊れにくくなるよ、と(今では当たり前のようにみんな言っていますが)いう記事を書きました。この時は出力に使うべきロールが何か?というのがわかっていませんでした。> サーバーからとってきた動的な値を表示するテキスト
2023.10.03
Frontend
Xでポストする:アクセシビリティに考慮した出力値のHTMLマークアップ
Facebookでシェアする:アクセシビリティに考慮した出力値のHTMLマークアップ
はてなブックマークで見る:アクセシビリティに考慮した出力値のHTMLマークアップ(2ブックマーク)
2
Pocketに保存する:アクセシビリティに考慮した出力値のHTMLマークアップ(1保存)
1
ChatGPTでE2Eテストコード自動作成
9/7に行われた技育CAMPアカデミアというイベントでPlaywrightについて話をしてきました。テストというと、設計手法であるところのテスト駆動開発は別としてちょっと業務っぽい感じがして学生さんにはちょっと響かないかな、というのも心配でしたが
2023.09.25
AIDD
Xでポストする:ChatGPTでE2Eテストコード自動作成
Facebookでシェアする:ChatGPTでE2Eテストコード自動作成
はてなブックマークで見る:ChatGPTでE2Eテストコード自動作成(4ブックマーク)
4
Pocketに保存する:ChatGPTでE2Eテストコード自動作成(5保存)
5
イチ押し。Playwrightの快適機能
Playwright連載3日目の今回は、その便利機能たちをCypressと比較しながら紹介します。Cypressで馴染みの便利機能がPlaywrightではどう実現されているのか、E2Eテストに関わる関係者の悩みを解決するどんな便利機能が備わっているのか、詳しく見てみましょう。
2023.08.24
Frontend
Xでポストする:イチ押し。Playwrightの快適機能
Facebookでシェアする:イチ押し。Playwrightの快適機能
はてなブックマークで見る:イチ押し。Playwrightの快適機能(4ブックマーク)
4
Pocketに保存する:イチ押し。Playwrightの快適機能(13保存)
13
Playwright連載始まります
現在人気が高まりつつあって、Cypressを追い抜こうとしているのがPlaywrightです。かなりCypressを意識して機能追加を行なってきている印象があります。現時点では...
2023.08.21
Frontend
Xでポストする:Playwright連載始まります
Facebookでシェアする:Playwright連載始まります
はてなブックマークで見る:Playwright連載始まります(39ブックマーク)
39
Pocketに保存する:Playwright連載始まります(30保存)
30
Software Design 2022年1月号に短期連載「Cypressで作る"消耗しない"E2Eテスト環境」を寄稿しました
Software Design 2022年1月号に短期連載「Cypressで作る消耗しないE2Eテスト環境」を寄稿しました!
2021.12.18
Frontend
Xでポストする:Software Design 2022年1月号に短期連載「Cypressで作る"消耗しない"E2Eテスト環境」を寄稿しました(9ポスト)
9
Facebookでシェアする:Software Design 2022年1月号に短期連載「Cypressで作る"消耗しない"E2Eテスト環境」を寄稿しました
はてなブックマークで見る:Software Design 2022年1月号に短期連載「Cypressで作る"消耗しない"E2Eテスト環境」を寄稿しました
Pocketに保存する:Software Design 2022年1月号に短期連載「Cypressで作る"消耗しない"E2Eテスト環境」を寄稿しました(1保存)
1
CypressでAPIの実行、異常系のテストを行う
フューチャー技術ブログでも何度か取り上げているCypressですが、私も最近触り始めました。今回取り上げたいテーマは、フロントエンドアプリケーションで、特定の画面に表示する情報をサーバーから取得する機能や、ボタンを押すとバックエンドサーバーなどにHTTPリクエストを送信するような機能が実装されている場合の話です。
2021.08.10
Frontend
Xでポストする:CypressでAPIの実行、異常系のテストを行う(32ポスト)
32
Facebookでシェアする:CypressでAPIの実行、異常系のテストを行う
はてなブックマークで見る:CypressでAPIの実行、異常系のテストを行う(1ブックマーク)
1
Pocketに保存する:CypressでAPIの実行、異常系のテストを行う(7保存)
7
Cypressでテスト可能なドラッグアンドドロップ実装
お仕事コードで、「Cypressで頑張ったけどドラッグアンドドロップのテストができない」という相談を受けました。僕も試行錯誤してみたのですが、どうもうまくいかず・・・CypressとかのE2Eテストは、完全なユーザーの入力をエミュレーションするわけではなくて、ユーザーが入力したときに発生するであろうイベントを擬似的に作って投げているにすぎません。実際に発生するイベントよりも少ないです。例えば...
2021.08.06
Frontend
Xでポストする:Cypressでテスト可能なドラッグアンドドロップ実装(28ポスト)
28
Facebookでシェアする:Cypressでテスト可能なドラッグアンドドロップ実装
はてなブックマークで見る:Cypressでテスト可能なドラッグアンドドロップ実装
Pocketに保存する:Cypressでテスト可能なドラッグアンドドロップ実装(3保存)
3
Cypress - 書きやすいテストの秘密と独自コマンドの実装
@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。
2021.04.28
Frontend
Xでポストする:Cypress - 書きやすいテストの秘密と独自コマンドの実装(28ポスト)
28
Facebookでシェアする:Cypress - 書きやすいテストの秘密と独自コマンドの実装
はてなブックマークで見る:Cypress - 書きやすいテストの秘密と独自コマンドの実装(56ブックマーク)
56
Pocketに保存する:Cypress - 書きやすいテストの秘密と独自コマンドの実装(33保存)
33
保守・拡張をしやすいカプセル化したCypress
Future Tech Night #8というイベントで、E2EテストをCypressで快適に行う方法を紹介しました。文字起こし兼補足として投稿します。壊れやすい上に読みにくくなりがちなE2Eテストは、cypressのCustom Commandsなどでカプセル化すると読みやすくなおしやすい。
2021.04.28
Frontend
Xでポストする:保守・拡張をしやすいカプセル化したCypress(3ポスト)
3
Facebookでシェアする:保守・拡張をしやすいカプセル化したCypress
はてなブックマークで見る:保守・拡張をしやすいカプセル化したCypress(3ブックマーク)
3
Pocketに保存する:保守・拡張をしやすいカプセル化したCypress(4保存)
4
Cypress - 設定編
Cypressの設定周りについて紹介します。何も手を加えないデフォルトでも動作はする
2021.04.28
Frontend
Xでポストする:Cypress - 設定編(2ポスト)
2
Facebookでシェアする:Cypress - 設定編
はてなブックマークで見る:Cypress - 設定編(2ブックマーク)
2
Pocketに保存する:Cypress - 設定編(5保存)
5
Cypress入門~初心者でも簡単にE2Eテストが作れる~
皆さんは普段どのようにE2Eテストを行っていますか?忍耐強く手動でポチポチ画面を触って...というのはなかなかにしんどいですよね。自動化ツールを使って楽したいけど難しくてよくわからない、という方もいらっしゃると思います。本記事では、テスト自動化ツールを全く使ったことのなかった私が、テスト自動化ツールであるCypressの導入から基本的な使い方までをご紹介していきます。
2021.04.28
Frontend
Xでポストする:Cypress入門~初心者でも簡単にE2Eテストが作れる~(21ポスト)
21
Facebookでシェアする:Cypress入門~初心者でも簡単にE2Eテストが作れる~
はてなブックマークで見る:Cypress入門~初心者でも簡単にE2Eテストが作れる~(12ブックマーク)
12
Pocketに保存する:Cypress入門~初心者でも簡単にE2Eテストが作れる~(32保存)
32
アクセシビリティ情報を使った壊れにくいE2Eテスト
E2Eテストはみんなしていますか?正直言うと、僕はあんまり好きじゃなかったです。お仕事では他の人が入れてくれたものが回っていたりしますが。前職で、SikuliXを使って社内向けのデスクトップアプリケーションのE2Eテストにトライしたことがあるんですが、すぐに壊れて動かなくなるので、費用対効果が出せなくてあきらめました(一人プロジェクトだったのもあります)。* 絵でマッチングを行うのでボタン画像をいっぱいスクショをとっていく必要がある
2021.02.26
Frontend
Xでポストする:アクセシビリティ情報を使った壊れにくいE2Eテスト(1ポスト)
1
Facebookでシェアする:アクセシビリティ情報を使った壊れにくいE2Eテスト
はてなブックマークで見る:アクセシビリティ情報を使った壊れにくいE2Eテスト(27ブックマーク)
27
Pocketに保存する:アクセシビリティ情報を使った壊れにくいE2Eテスト(25保存)
25
打鍵テストをCIで回す:Cypress on GitHub Actions
つらい打鍵テストをCIで回して、テスト結果をWebダッシュボードでチーム内に共有しようというお話です。
2020.01.15
DevOps
Xでポストする:打鍵テストをCIで回す:Cypress on GitHub Actions
Facebookでシェアする:打鍵テストをCIで回す:Cypress on GitHub Actions(39シェア)
39
はてなブックマークで見る:打鍵テストをCIで回す:Cypress on GitHub Actions(20ブックマーク)
20
Pocketに保存する:打鍵テストをCIで回す:Cypress on GitHub Actions(22保存)
22
1