Playwright– tag –

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESでは、2023年からPlaywrightを用いたVisual Regression Test（VRT）を運用しています。VRTの運用方法については以下のエントリーで紹介していますので、ぜひあわせてご覧ください。 https://developers.prtimes.com/2024/04/26/visual-regression-test-using-playwright-in-prtimes/ 先日リリースされたPlaywright v1.62.0では、スナップショットの生成・比較を行うtoHaveScreenshotがWebP形式をサポートしました。PR TIMESではVRTの...

こんにちは、フロントエンドエンジニアの小張（@kobari41257）です。 今回、肥大化していたE2Eテストのシナリオを整理し、Playwrightを使った実行基盤に移行したことで、Flaky率や実行時間を改善した取り組みについてご紹介します。 【背景】 これまでPR TIMESではAutify NoCode（以下Autify）を用いたE2Eテストを行ってきました。 https://autify.jp/products/nocode https://developers.prtimes.com/2022/05/12/test-automation-refactoring/ しかし、機能追加に伴い新しいテストケースが追加されシナリオ数が肥...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESのフロントエンドではこれまで、MarkuplintやStorybook Testを用いたアクセシビリティ（a11y）テストを実施してきました。以下の記事はMarkuplintを導入した際の記事になります。 https://developers.prtimes.com/2025/03/10/markuplint/ しかし、PR TIMESではReactを利用して開発を行っているため、これまではコンポーネント単位での品質担保が中心となっていました。そこで、@axe-core/playwrightを導入し、HTML全体のa11y品質もチ...

こんにちは　PR TIMES開発本部のインターンの Chanoknan です。 PR TIMESエディターのフロントエンドテスト戦略開発の一環として、エディターのPlaywright統合テストをPage Object Model（POM）パターンを使ってリファクタリングしました。このブログでは、このリファクタリングについて話したいと思います。 PR TIMESエディターのフロントエンドテスト戦略については、以下の記事で詳しく読むことができます。 https://developers.prtimes.com/?page_id=7762 【問題点】 最初は、テストを直接テストファイルに記...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 みなさん、フロントエンドのテストって書いてますか？ 今回は自分が所属しているエディターチームのエディターに関するフロントエンドのテスト戦略について書こうと思います。 【エディターについて】 PR TIMESでは、プレスリリースを入稿するためのエディターを提供していて、2023年の12月にUI刷新を行いました。 https://prtimes.jp/main/html/rd/p/000001357.000000112.html エディターは、2024年12月現在、React、Tiptap（...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 昨年、Integration TestツールをCypressからPlaywrightに移行しました。その際、Visual Regression Test（以下、VRT）を始め、1年ほど経ったので弊社で行っているPlaywrightを用いたVRTの運用方法についてご紹介します。 https://developers.prtimes.com/2023/04/10/migrate-from-cypress-to-playwright 【前提】 PR TIMESは、React + Vite製のアプリケーション（主に企業様の管理画面）とNext.js製のアプリケーション（SEOが重要...