BrowserStack：テスト自動化有料ツールの決定版
特によく使われる上二つのサービスでは”Webアプリケーションのテスト環境"を提供しており、インターネットに公開されたWebアプリケーション、開発中のローカルのWebアプリケーションのテスト環境が揃っています。 テスト環境 = テスト用アプリケーションがデプロイされ、ホストされている環境 テスト実行環境 = 上記テスト環境にアクセスし、テストを実施するためのデバイス・ブラウザ・OSを含む環境 BrowserStackはクラウド上で後者の「テスト実行環境」を提供しています。 BrowserStack Live （手動テスト) BrowserStackにホストされている様々なデバイスを利用し、マニュアルテストすることが可能です。画像ではiPhone13のデバイスを立ち上げ、Webのダッシュボード上で操作を行っている様子です。シミュレータではなく、実機デバイスをブラウザ上から操作できます。 Bro
Best Practices | Playwright
Introduction This guide should help you to make sure you are following our best practices and writing tests that are more resilient. Testing philosophy Test user-visible behavior Automated tests should verify that the application code works for the end users, and avoid relying on implementation details such as things which users will not typically use, see, or even know about such as the name o
vscodeでTypeScriptをデバッグしよう（jestもあるよ）
こんにちは、monjaです。 思った通りに動くプログラムを書き続けることができるプロ・プログラマーになりたいと日々思っていたりいなかったりしますが、残念ながら時々思った通りに動かないプログラムを書いてしまうものです。プログラムは思った通りではなく書いた通りに動きますからね。 そんなとき、思惑と現実の乖離、つまりバグの原因を見つけて直す必要があるわけですが、ソースコードを読み直したり結果を見ても原因がピンと来ないときもあるものです。 とりあえずprintfデバッグ（JavaScriptならconsole.logデバッグですね）をするのも乙ですが、仕込みが面倒であったり、必要な情報を一発で表示できなくて数回実行しなおすハメになったり、原因発見で満足してprintfを消すのを忘れてしまうこともあります。世の中にはデバッガというめちゃ便利ツールがあるので、それが利用できるときは積極的に利用していき
2023年 研究開発部 新卒技術研修 ~ テストコード編 ~ - Sansan Tech Blog
こんにちは、研究開発部 Data Analysisグループの笛木です。 4/26（水）〜 4/28（金）で研究開発部内の技術研修を行いました。 こちらのブログの続きでテストコードについての研修資料を一部公開します。研修では新卒2年目の私が1年間で部内のコードなどから学んだ情報を共有しました。至らない部分もあるかもしれませんが、ご参考になれば幸いです。 こちらの研修で使用したGitHubのコードリンクは以下です。適宜、ご参照ください。 github.com 目次 目次 はじめに この研修の目的 研修スコープ外 テストコードについて テストコードの便利な点 テストコードの悪い例 テストコードに関するFAQ pytestによるテストコードの書き方 ファイル名 ディレクトリ 基本編 Parametrize Fixture 異常系 Mock indirect conftest 知っておくと活用する場
E2Eテスト自動化変遷 〜ノーコードからCypress、そしてPlaywrightへ〜 - estie inside blog
こんにちは！estieでQAエンジニアをしているかすや（macho | きんにQA💪🏾 (@ma_cho29) / X）です。 今回ブログを書くにあたり、前回書いたのはいつだったかなー？と見返すと1年が経過していたことに気がつきました。 歳を重ねると体感時間が短くなると聞いたことがありますがそれでしょうか・・・ 入社3年目になる今年もやり残しがないように過ごしたいところです。 さて、今回はQA未経験だった私が1人目のQAエンジニアとしてestieに入社し現在までおこなってきたE2Eテスト自動化の変遷について語っていきたいと思います。 私がメインで関わっているプロダクト「estie マーケット調査」は約2年間でテストフレームワーク移行を2度おこないました。 当時の意思決定やその際に個人的に感じたフレームワークごとのメリット・デメリットなど含めて話したいと思います。 （あくまで僕の所属する
Playwright連載始まります | フューチャー技術ブログ
E2Eフレームワークとして高い人気を誇ってきたのがCypressです。使いやすいテストランナー、わかりやすいテスト結果、TypeScriptの組み込みサポート、プラグインによる拡張、(Seleniumと比較して)高速な実行などを提供しています。フューチャー社内でも使っているプロジェクトがいくつもあり、過去にCypress連載をブログ上で行い、それがきっかけとなってSoftware Designに連載も行いました。 一方で、現在人気が高まりつつあって、Cypressを追い抜こうとしているのがPlaywrightです。かなりCypressを意識して機能追加を行なってきている印象があります。現時点では特徴的なタイムトラベルデバッガー（過去の履歴すべてを保持しておいて気軽に前後DOMの状態を比較したりできる)、スクリーンショット、どちらもExperimentalなコンポーネントテストなど、できるこ
なぜE2Eテストでidを使うべきではないのか ｜Autifyブログ
こんにちは。AutifyのSET(Software Engineer in Test) 、末村(@tsueeemura)です。 皆さん、E2Eテストしてますか？以前はほぼSelenium一択みたいなところがありましたが、最近はPuppeteerやCypress、TestCafeなどいろいろなフレームワークがあり、ついつい目移りしてしまいますね！ さて、どのフレームワークを使うにせよ、E2Eテストを書く上で共通で意識しないといけない重要なファクターがいくつか存在します。 その一つが ロケータ です。操作や検証の対象となる要素を指定するためのキーのことです。 ロケータにはCSSセレクタやXPathが利用でき、idやclass、name といった属性を利用するのが一般的です。 今回はこのロケータについての話を書こうと思います。 ロケータとは 要素を一意に指定できさえすればロケータに使うものは何で
フロントエンドのテスト手法、何がある？ 知っておきたいテストとその戦略を網羅的に解説
フロントエンドの役割が増す中、効率のよく確実なテストを行うことはもはや常識になってきています。フロントエンド・アーキテクトとして活躍する吉井健文さんの著書『フロントエンド開発のためのテスト入門』（翔泳社）では、フロントエンドエンジニアが押さておくべきテストの基本と具体的な実践手法が解説されています。今回は本書から、テストの種類とその戦略について網羅的に説明されている「第2章 テスト手法とテスト戦略」を抜粋して紹介します。 本記事は『フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識』の「第2章 テスト手法とテスト戦略」から抜粋したものです。掲載にあたって一部を編集しています なお、5月10日（水）に、著者の吉井健文さんをゲストに迎えたCodeZine主催のウェビナー「Webフロントエンドのための実践『テスト』手法」が開催されます。こちらもぜひチェックして
一から分かる！ テスト自動化
テスト自動化に取り組みたいけれどノウハウがない、過去に導入していたがうまくいかなくてやめた人に向けて、テスト自動化の「あるある」な失敗事例とともにどうすればうまく取り入れられるのかを解説する本連載。最終回はテスト自動化のライフサイクルについて。
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ
テスト自動化設計で注意すべきこと～JaSST’23Tokyo参加レポート～ | Sqripts
こんにちは。QAエンジニアをしているゆ太郎です。 ここ数年は主にWeb管理システムのリグレッションテストに関わることが多く、テスト自動化に興味津々な今日この頃です。 3/9-10に開催された、JaSST’23Tokyoにオンライン参加してきました。JaSST’23Tokyoの開催を知りセッション概要を確認した際に、テスト自動化に関する面白そうなタイトルが並んでいたので、急遽オンラインで参加して聴講させてもらいました。今回は、『結合テストの自動化にQAはどうかかわっていったか』というセッションについてレポートしたいと思います。 JaSSTとは JaSSTとは「ソフトウェアテストおよびソフトウェア品質に関心のある方が深い学びを得ることを目指して、 ソフトウェアテスト分野の幅広い情報と、参加者同士の交流や議論ができる場を提供」するため、特定非営利活動法人ソフトウェアテスト技術振興協会 (ASTE
クラウド型電子カルテにVisual Regression Testを導入した話 - エムスリーテックブログ
【デジカルチーム ブログリレー3日目】 こんにちは、エンジニアリンググループ デジカルチームの穴繁です。 今回はクラウド型電子カルテであるエムスリーデジカルのフロントエンド開発にて、Visual Regression Test (VRT) を導入した話をします。 課題 利用ツール Playwright Mock Service Worker (MSW) 工夫点 UIコンポーネントのカタログを新規作成 CIでVRTを実行する 結果 まとめ We are Hiring! 課題 現在、デジカルでは段階的なデザインシステムの導入を進めています。その過程で、「ボタンの横幅を変えたい」「Typographyを調整したい」といったデザイン変更の機会が増えました。各コンポーネントに対するデザイン変更は画面全体のデザインに影響が及びがちです。 そのため、コード上の修正は比較的簡単に済んだとしても、 レイアウ
【第4回】 E2Eテスト自動化ベストプラクティス | Sqripts
現在は「VUCAの時代」と言います。VUCAとはVolatility（変動性）、Uncertainty（不確実性）、Complexity（複雑性）、Ambiguity（曖昧性）の頭文字をとったビジネスシーンで使われる言葉です。これら4つの言葉が表すとおり、「未来の予測が難しい状況」を表しています。 過去を振り返ると、使い古された言葉になりますが、高度経済成長時代に象徴されるように「作れば売れる」時代でした。しかし、VUCAという言葉が登場したように、現在は、「何が売れるかわかりにくい」状況に陥っています。 この連載では、現在やこれからの時代で求められるであろうソフトウェア開発における「品質」を再定義し、あるべき姿への道筋を示し、代表的なプラクティスなどを紹介しながら、アジャイルQA（アジャイルな品質保証、もしくは品質合意）という活動や、具体的な手段としてアジャイルテスティングのあり方を議論
Autifyでのテスト自動化プロジェクトで考慮しておくべきこと | Sqripts
こんにちは！久し振りにひよこ隊長が登場です！最近ではロボにコーヒーを淹れてもらえるようになり、以前の私の記事で紹介した猫ロボさんのファミレス配膳と並び、生活圏での様々な自動化がかなり当たり前になってきたように感じています。 前回までは、Autifyの基本的なツールの使用方法についてをご紹介いたしましたが、今回は実際にAutifyを使用してテスト自動化を進める際に事前に考慮しておくと良い点についてを、具体的な事例を踏まえて共有し、テスト自動化を広めて行こうと思います。 過去の記事 – #1 Autifyの基本操作 – #2 Autifyの応用操作について – #3 Autifyの応用操作について(JSステップ編) この記事で伝えたいこと AutifyでのE2Eテスト自動化プロジェクトでは、初動の段階で以下の点を考慮すると、より効果の高い自動化に繋がります。 ・目的/対象、範囲/手段をきちんと
アジャイル開発の旨味は「ビジネスリスクを減らせる」こと VUCASの時代だから重要な“小さく失敗する”考え方
スピーディにテストケースを再利用するノウハウや技術、そしてテストの「実行」ではなく「設計」の自動化に着目したアプローチ法について考える「品質か？開発スピードか？大規模アジャイル時代の品質確保」。ここで株式会社ベリサーブの朱峰氏が登壇。続いて、現在の時代とアジャイル開発について話します。前回はこちらから。 このスライドはいったい何を示したものでしょうか？ 朱峰錦司氏：アジェンダを踏まえて本題に入ります。今日の私の話の6割ぐらいは、基本的には一般論です。もしくは「私はこう考えています」という話です。そこに私の経験を30パーセント加えます。この発表の中だけでなく、事前にいくつかピックアップした質問にも後半で答えようと思っています。最後の10パーセントはちょっとだけ宣伝要素があります。ぜひ聞いてください。 では中身に入ります。話の前に、1つだけみなさんにクイズを出します。制限時間は1分間です。した
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】フロントエンドのテストコードを書いてみよう【Vitest】 | ソフトウェア開発のギークフィード
【いつ立ち上げるのがベストか】LayerXの爆速SaaS開発を支えるQAチームの知られざる仕事と役割
k8s 上の負荷試験基盤でロードテストを効率化するために新機能を追加した話 - DMM inside
