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
Trace viewer | Playwright
Introduction Playwright Trace Viewer is a GUI tool that helps you explore recorded Playwright traces after the script has ran. Traces are a great way for debugging your tests when they fail on CI. You can open traces locally or in your browser on trace.playwright.dev. Trace Viewer features Actions In the Actions tab you can see what locator was used for every action and how long each one took t
PlaywrightのVSCode拡張を使って効率的にテストを書く
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
フロントエンド刷新プロジェクトを成功に導くためのテスト手法の紹介 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズではkintoneのフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 今回は、フロリアのチームの1つであるMiraチームのテスト手法について紹介します。 フロリアの詳細については次の記事をご覧ください。 フロリアについて フロリアでは、次のような構成でそれぞれのチームがオーナーシップを持って活動しており、テストの方針はチームごとに決めています。 プロダクトオーナー: 1名 エンジニア: 3-4名 QA: 1名 スクラムマスター: 1名 フロリアのチーム構成 チームのミッションに合わせたテストの目的 Miraチームでは、kintoneのデザインやふるまいを変えずに、利用者に気づかれない形でReactに置き換えるというミ
ZOZOMO開発チームのユニットテスト戦略とテスト駆動開発 - ZOZO TECH BLOG
はじめに ZOZOMO部プロダクト開発ブロックの木目沢です。 ZOZOMOで提供しているZOZOTOWN上での「ブランド実店舗の在庫確認・在庫取り置き」APIの開発に携わっています。 今回は、開発当初から現在に至るまでのユニットテスト戦略についてお話しします。 意識してテストを書いていたのにカバレッジが低い問題 2021年11月にリリースされたブランド実店舗の在庫確認・在庫取り置きの機能ですが、開発当初のユニットテスト方針は以下のようなものでした。 モデルのユニットテストは必ず書く モデル以外の箇所は可能な範囲でユニットテストを書く 当時は実装のコードよりテストコードを先に書くといった文化はなく、レビューでテストの有無や内容を指摘する程度のものでした。 カバレッジも取っており、GitHub上では見える化していたものの、いつの間にか確認する機会も失われていきました。 もちろん、リリース前には
質とスピード（2022春版、質疑応答用資料付き） / Quality and Speed 2022 Spring Edition
質とスピード（2022春版、質疑応答用資料付き）
STORESにE2Eテストを導入した話
これ何 これは hey Advent Calendar 14日目の記事です。 hey株式会社で STORES のフロントエンドエンジニアをしているものです。社内ではうめきちやうめくんと呼ばれることが多いです。普段は STORES というネットショップ作成サービスのダッシュボード上に弊社POSレジアプリをサポートする機能を組み込んでいます。今回はそのダッシュボードにE2Eテストを導入した話を紹介していきます。 解決したい問題 フロントチームで、本番環境で発生した障害を減らす、または発生したことにすぐに気づきサービスのダウンタイムを少なくするにはどうするべきかを考える機会がありました。 リリース前に機能を実装したチームで起こりうるテストケースを並べて機能が想定した通りに動作するかを確認するといったQAをしているのですが、どうしても手動で確認漏れが起こったり、軽微な修正を加えた際に、特定のブラウ
2021年現在、Puppeteerを使う理由はなくなった。Playwrightを使おう。
（たんなるポエムです） 個人的に、 puppeteer-ruby と playwright-ruby-client という２つのOSSを育てている。 puppeteer-rubyは Google Chromeチームによる元祖Puppeteer をまるっとRubyで再実装したライブラリで、playwright-ruby-clientは PuppeteerからフォークしてMicrosoft（のなかの元Chromeチームメンバー）が育てているPlaywright のクライアントAPIをRubyで実装したライブラリだ。 実装において、puppeteerやplaywrightのソースコードをそれなりに読んでいる。 Playwrightの唯一の欠点(= Puppeteerの存在意義)がなくなった 個人ブログでこの記事を書いたときには、Playwrightは自身が起動したブラウザしか自動操作できないとい
ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
[Angular] はじめての E2E テスト | QUARTETCOM TECH BLOG
さてさてどれを使って良いのやら…。今回は 「何となく聞いたことあるから使ってみたい」という独断で ●Protractor ●Puppeteer ●cypress の 3 つをお試しで使ってみようと思います。 ２）テスト対象のデモアプリ E2E テストの対象として、このような簡単なデモアプリを作ってみました。 ユーザー名が ringtail003 ならログインできます。パスワードは何でも通ります。ガバガバアプリです。 E2E でテストしたい内容（= シナリオ）は下記の通りです。 正常ケースのログイン/ログアウト ユーザー名 ringtail003 でログインするとプロフィールのページに遷移する プロフィールのページでログアウトする 異常ケースのログイン エラーメッセージが表示されログインできない ３）Angular のサンプルテスト掘り下げ編 実は Angular では E2E の雛形のテス
![[Angular] はじめての E2E テスト | QUARTETCOM TECH BLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e2e6ab7191ecdbf491cb0aca850a26a451ed9e3/height=288;version=1;width=512/https%3A%2F%2Fuser-images.githubusercontent.com%2F15980747%2F100535132-5eddbb80-3259-11eb-8ba1-9220c1e76afb.png)
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
【Angular】これからはじめるE2Eテスト（2019） - Qiita
この記事は Angular #2 Advent Calendar 2019 10日目の記事です Angular 9なかなかこないですね！みなさまのAngularのアップデート状況はいかがなものでしょうか。 いざアップデートしたはいいものの、ブラウザ上で正常に動作するか手作業で確認するのはなかなかツライものがあります。 また、E2Eで自動化してみたいけど何から手をつけたらいいか分からなかったり、昔からの製品なのでIEでも動作するか確認したい・・・ など色々困っていることはありませんでしょうか？ この記事では、マルチブラウザで動作し （Chrome、Firefox、Edge、IE11など） Angularで困ったときのナレッジが割と見つかりやすく Angular CLIでプロジェクトを作成した際に標準でインストールされている Protractor を使って はじめてE2Eを書くための方法を紹介
ソフトウェアの品質を高めて作業効率も上げる、Angularの自動単体テスト
これらのうち、本記事では単体テストに着目して、記述や実行の方法を説明していきます。e2eテストは次回以降で取り上げる予定です。 対象読者 Angularでテスト駆動開発を実践したい方 単体テストの実行をお客さまから要求されている方 自分の実装したコードが信用できず、品質確保したい方 必要な環境 Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。 今回は以下の環境で動作を確認しています。 Windows 10 64bit版 Angular 5.2 Node.js v8.11.1 64bit版 Angular CLI 1.7.4 Microsoft Edge 41.16299.248.0（Webページ表示用） Google Chrome 65.0.33
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SafeTest」がすごい ー Netflix内で利用されている、新しいフロントエンドテストライブラリ