StorybookとPlaywrightではじめるインタラクションテスト - enechain Tech Blog

2024/12/21 15 users StorYBook enechain Tech Blog

この記事はenechain Advent Calendar 2024の21日目の記事です🎄 はじめに こんにちは。enechainでソフトウェアエンジニアをしている@nakker1218です。 私たちのチームでは、電力の取引仲介を行う同僚(ブローカー)たちが使う、注文の統合管理システムeNgineの開発しています。 ブローカーは日々1分1秒を争いながら収益を... 続きを読む

E2Eテスト分析基盤としてReportPortalを導入しました - freee Developers Hub

2024/12/07 19 users ADV freee Developers zaki 最後 導入

はじめに 現在のE2Eテスト分析基盤の課題 ReportPortalとは？ 構築方法 ECS or EKS 構成図 インフラコストについて E2Eプロジェクトへの導入方法 Playwrightへの導入 Slack通知への導入 分析ダッシュボードを作成 最後に はじめに こんにちは、SEQチーム (Software Engineering in Quality) の zaki です。 freee QA Adv... 続きを読む

アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう

2024/11/24 12 users

export const Button = ({ children }) => { - return <button className="btn">{children}</button> + return <button className="button">{children}</button> } しかし、スナップショットテストではクラス名の変更によりテストが失敗することになります。このように、スナップショットテストは外部から見た振る舞いが... 続きを読む

Rails: システムテストのドライバをSeleniumからPlaywrightに差し替えたら安定した（翻訳）｜TechRacho by BPS株式会社

2024/11/01 12 users Rails Selenium DHH ドライバ 翻訳

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Running Rails System Tests with Playwright instead of Selenium | justin․searls․co 原文公開日: 2024/06/18 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 先週、DHHが「システムテストの導入は... 続きを読む

Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)

2024/10/31 86 users 先方 社名 生成 実行 個別

ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置... 続きを読む

Playwrightでライブプレビューツールを実装する - ベースマキナ エンジニアブログ

2024/08/30 43 users ライブプレビュー ベースマキナ Chrom npm YEBIS

こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChrom... 続きを読む

Node.jsで型安全な環境変数を扱うスニペット

2024/08/24 74 users スニペット node.js 環境変数 アプリケーション 起動

Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次の... 続きを読む

Playwright を使いこなすためのベストプラクティス - Qiita

2024/07/17 138 users Qiita ベストプラクティス 保守 公式ドキュメント

はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中... 続きを読む

［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで

2024/06/03 9 users End-to-End 本書 ソフトウェアテスト 視点 動作

この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入してい... 続きを読む

Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers

2024/05/31 15 users newspic NewsPicks AWS 海老澤 テスト

はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPic... 続きを読む

[Playwright]VScodeの拡張機能でらくらくブラウザ操作

2024/05/29 13 users Selenium vscode Python ライブラリ 新卒

はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非... 続きを読む

フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog

2024/05/27 20 users ビジュアルリグレッションテスト VRT フロントエンド開発

はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加し... 続きを読む

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」は、マイクロソフトが中心となってオープンソースで開発... 続きを読む