PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ

2024/04/26 25 users Visual Regression Test

{ "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/workspace mcr.microsoft.com/playwright:v$(node -e 'console.log(require(\"./package.json\").devDependencies[\"@playwright/test\"])')-jammy", "_test": "playwright test", "_test:ci": "CI=1 playwright test", "_test:u": "playwright test ... 続きを読む

Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers

2024/04/25 108 users NewsPicks エンドツーエンドテスト 海老澤 運用 弊社

はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用... 続きを読む

Playwrightのベストプラクティスを翻訳してみた

2024/04/15 150 users ベストプラクティス 原文 Best practices

Playwrightの公式ドキュメントに「Best Practices」というページがあったので翻訳してみました。 原文： Best Practices | Playwright イントロダクション このガイドは、私たちが提供するベストプラクティスに習い、より弾力性のあるテストを書くために役立つはずです。 テスト哲学​ ユーザから見えるふるまいをテスト... 続きを読む

【Playwright】v1.4系の新機能まとめ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/04/12 12 users ラクス koki_matsura 独断 偏見 目次

こんにちは、フロントエンド開発課所属のkoki_matsuraです！ 本記事では、E2EテストライブラリであるPlaywrightのv1.40 ~ 最新版v1.43で追加された機能の中から僕の独断と偏見でいくつかを紹介したいと思います。 では早速、紹介していきます！ 以下は目次です。 v1.40の新機能 Test Generatorにアサーションコード生成... 続きを読む

axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした

2024/03/17 26 users アクセシビリティ インスト web 自動テスト 興味

Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインスト... 続きを読む

E2EテストでNextAuth認証(OAuthなど)を突破する方法

2024/03/07 72 users OAuth Auth.js 認証方式 認証 パスワード認証

NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 ... 続きを読む

新しい UI テストの手法を提供するテストライブラリ SafeTest

2024/02/25 100 users React angular Jest Svelte Vue

新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの... 続きを読む

Playwright で一番小さく始める VRT と、次のステップの選択肢

2024/02/21 5 users VRT 選択肢 ステップ

2024/02/21 ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット で発表したスライドです。 https://trident-qa.connpass.com/event/308664/ 参照したURL - https://playwright.dev/docs/test-snapshots - https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions - https://tech.route... 続きを読む

【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/01/23 15 users ラクス koki_matsura コンポーネント 目次 ココ

こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイ... 続きを読む

E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog

2024/01/17 46 users Capybara Sasaki Selenium 移行 背景

こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案... 続きを読む

data-testidはいつ使うべきか？そもそも使うべきなのか？ | フューチャー技術ブログ

2023/11/28 16 users クエリー DOM フューチャー技術ブログ ドキュメント 属性値

Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、... 続きを読む

ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)

2023/11/25 276 users CDP Selenium WebDriver ウェブブラウザ

ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テス... 続きを読む

マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行

2023/10/17 246 users クロスブラウザ Webアプリケーション マイクロソフト 開発

マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発... 続きを読む

PlaywrightのVSCode拡張を使って効率的にテストを書く

2023/10/11 121 users vscode GUI VSCode拡張 Microsoft

この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便... 続きを読む

E2Eテスト自動化ツールの最新トレンド──Playwright？ ノーコード？ Seleniumから多極化の時代へ！

2023/09/25 9 users Selenium 多極化 ノーコード 最新トレンド 時代

ウェブサイトやモバイルアプリの、エンドユーザーからみた動作を確認するテストはE2Eテスト（End-to-End Test）と呼ばれ、このE2Eテストの自動化ツールは、アジャイル開発の普及もあって、今では多くの開発現場で活用されるようになりました。ブラウザ操作の自動化ツールSelenium（セレニウム）は日本でも有名になり、ご... 続きを読む

マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始

2023/08/28 224 users プレビュー マイクロソフト 開始 自動化サービス 発表

マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表... 続きを読む

2023-08-16のJS: Next.js v13.4.16(test mode)、SafariのStorage Policy、ESMへの移行(Redux)

2023/08/16 6 users Vercel MSW JSer.info ESM redux

JSer.info #656 - Next.js v13.4.16がリリースされています。 Release v13.4.16 · vercel/next.js v13.4.16には、実験的な機能としてtest modeというPlaywrightとMSWを使ったテストする仕組みが追加されています。 Next.jsのApp Directoryでは、MSWがNext.jsの処理に差し込めるポイントがなかったため、MSWが動かないな... 続きを読む

Next.js: next/testmodeという概念が出現しMSW x Playwrightのテストがやりやすくなりそう

2023/08/16 16 users experimental NEXT MSW 概念 テスト

Next.js: next/testmodeという概念が出現しMSW x Playwrightのテストがやりやすくなりそう 2023年8月15日にリリースされた Next.js v13.4.16から next/experimental/playwright next/experimental/playwright/msw が登場してテストがしやすくなりそう。というお話です！ 前提条件 今回お話するのは、Next.js の開発サー... 続きを読む

CypressからPlaywrightに移行しました | PR TIMES 開発者ブログ

2023/04/10 20 users Cypress やなぎ apple_yagi フロントエンド

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 なぜ移行したのか いくつか理由はありますが、大きな理由の1つとして Cypress ... 続きを読む

mablからPlaywrightに移行しました - LegalOn Technologies Engineering Blog

2023/03/31 11 users mabl

こんにちは！ 株式会社LegalOn TechnologiesのLegalForceキャビネ開発部SET（Software Engineer in Test）のひきもち（@rmochioo）です。 昨年8月に入社し、LegalForceキャビネのAPIテスト、自動E2Eテストなどの自動テストの導入、QA業務まで幅広く携わっております。 APIテストに関しては先日、記事出ていますのでご興... 続きを読む

ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol

2022/03/29 154 users WebDriver ウェブアプリケーション Appium

ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後にいるWebDriver、Chrome DevTools Protoc... 続きを読む

Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ

2022/03/18 18 users vite サイボウズエンジニア ブログ

こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文... 続きを読む

ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog

2021/12/08 8 users Cypress puppeteer TAKA 冷え性 ツール

この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際... 続きを読む

Python と Playwright でブラウザを自動操作させるコードを自動生成したよ - Qiita

2021/02/14 341 users Qiita スクレイピング Python 大幅パワー 学習

Playwright が昨年１年間で大幅パワーアップしていたので、使い方を確認したときの記録のまとめです。 ブラウザを自動操作できるということは、簡単なスクレイピングやブラウザ側のテスト自動化が簡単にできるようになります。 特に、Python での解説がまだまだ少なかったので、自分の学習を含めてまとめました。 今回は... 続きを読む

2020年: PuppeteerとPlaywrightの激動の１年。 - Qiita

2020/12/22 18 users Selenium Qiita puppeteer 激動 勢い

2020年は、突如Playwrightが現れ、Seleniumを置き換えるほどの勢いでいろいろなツールが現れました。 Puppeteerは、Playwrightが出てからもTypeScript化をしたりカスタムクエリハンドラ機能が実装されたりと、Chrome DevToolsプロトコルを利用するライブラリとして改善が続いています。 今年１年の Puppeteerのリリース... 続きを読む