フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは 下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後 動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具
はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode
![[Playwright]VScodeの拡張機能でらくらくブラウザ操作](https://cdn-ak-scissors.b.st-hatena.com/image/square/aeab1ee552bc8ea8fc414d63e3cd992eb142f720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--V4XD7bFE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BPlaywright%25255DVScode%2525E3%252581%2525AE%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A7%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Adumbled0re%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc1NTA1NzM5OGYuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B9%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252583%25259E%2525E3%252583%2525BC%2525E3%252582%2525B1%2525E3%252583%252583%2525E3%252583%252588%252520Engineer%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ1MTY4OGExZGEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのように両立させて開発しているかを紹介します。 プロジェクトの概要とWebフロントエンドの担当領域 メルカリ ハロは「あたらしい出会いを繋ぎ、信頼と機会をひろげる」がミッションで、いますぐ働き手が欲しいパートナー (事業者) と、いますぐ働きたいクルー(働き手)を繋げるサービスです。クルーは自身のスキルや時間を活用して働くことができます。 メルカリ ハロは複数のアプリケーションが存在し、そのなかでWebフロントエンドが関わる領域として以下の3つが
In UI development, making sure everything looks perfect is just as important as making sure it works. While unit tests can check if each part functions correctly, they often miss visual issues. That's where visual tests come in, yielding more useful results with less code. This post will cover: What are visual tests?How are they better than unit tests for UI?Why should I bring them into my workflo
「rabbit r1」はカメラや音声入出力機能を搭載したAIデバイスで、「食事の配達依頼」「メールの送信」「音楽再生」など多様な操作をAI処理でこなせるとアピールされています。しかし、rabbit r1を実際に入手した詐欺撲滅系YouTuberのCoffeezilla氏は、rabbit r1が詐欺的商品であると非難しています。 $30,000,000 AI Is Hiding a Scam - YouTube rabbit r1の見た目はこんな感じ。ディスプレイと前方後方両対応カメラと操作ホイールを搭載したシンプルな外観が特徴です。 rabbit r1の発表時にはAIを用いて「会話しながらメニューを決めて食品配達サービスに注文」「好みの音楽を伝えて再生」といった操作が可能なことがアピールされていました。 しかし、rabbit r1を実際に入手したユーザーからは「AIの応答の品質が低い」「配
LLM でブラウザを操作する WEB エージェントと周辺技術のざっくり紹介 - Algomatic Tech Blog
こんにちは。Algomatic NEO(x) カンパニー機械学習エンジニアの宮脇（@catshun_）です。 本記事ではブラウザやモバイル画面を操作する LLM エージェントとその周辺技術について超ざっくりと紹介します。 社内に向けたキャッチアップ資料として作成しており、加筆修正する可能性がありますが、本記事を読んだ方の議論のネタ程度になってくれれば幸いです。 以前 AI ソフトウェアエンジニアについて紹介しているので、こちらもご覧いただけたら幸いです。 おことわり 本記事では対象とする研究棟の 詳細な解説は含みません。詳細は元の論文を参照ください。 不十分また不適切な言及内容がありましたらご指摘いただけますと幸いです。 プロダクト等の利用時は 必ずライセンスや利用規約を参照して下さい。 本記事の目次 Google I/O '24 での Gemini Nano × Android の発表
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
Vitest Browser Mode · vitest-dev/vitest · Discussion #5828
It's been some time since we gave any update on the Browser Mode, and Vitest 2.0 seems like a good time to explain how we feel about it. And we have a lot of plans! The initial purpose of Vitest was to allow running tests without a complex Jest setup but with the battle-tested Jest API everyone is already familiar with. This also meant faking the browser environment (with jsdom or happy-dom). With
Storybook 8.1
Storybook is the industry standard workshop for building, testing, and documenting UI components. Thousands of developers use it every day, including teams at BBC, Etsy, and Dropbox. Over the past year we’ve focused on quality of life maintenance work. This culminated in the March launch of Storybook 8.0, our most performant and stable release yet. Now in 8.x, we’re back on the hunt to improve you
真に効果的なテスト自動化を実現するために。 フレームワークに依存しない「普遍的なテクニック」を徹底解説！ 本書は、Webアプリケーションのテスト担当者や開発者が、自身のプロジェクトにスムーズに自動テストを導入し、自動テストに支えられた開発プロセスを実現できるようになる実践的なガイドブックです。主に下記に挙げるような内容を解説します。 ・自動テストに取り組むための心構えや考え方、マインドセット ・テスト全般や自動テストに関する基本的な知識 ・E2E自動テストの実践方法 ・自動テストや開発プロセスの改善方法 ・様々なトラブルシューティングの技術 「なぜ自動化が必要なのか？」という目的の理解に重きを置き、ただ自動化して終わりになるのではなく、自動テストを軸にしながらプロダクトを継続的に改善していくための考え方や技法を解説しています。 E2Eテストの実践方法の解説では、手を動かして学べるハンズオン
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
週刊Railsウォッチ: Ruby on Jets 6.0がRailsをサポートほか（20240620後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt-i
ユーザーインターフェース（UI）テストなどの自動化ツールを提供するAutifyは2024年6月20日、テストケースの自動生成ツール「Autify Genesis」のベータ版の提供を同日付で始めたと発表した。テストの自動化ツールに生成AI（人工知能）技術を取り込むことで、自動化の潮流をこれまで対象としていたテストの実施工程にとどまらず、上流工程にも「遡上」させたい考えだ。 仕様書や設計書からAIがテストケースを生成 「何をテストすればよいか、自動化すればよいか分かっていれば、Autify（の既存ツール）ですぐに自動化できる。だが、実際には何をテストしたらよいか、それをどう自動化すればよいか分からないなど、上流工程に根本の問題があるケースも多い。生成AIによる仕様書の解析でそこを解決しようというのが当社のアプローチだ」――。 Autifyの近澤良代表取締役CEO（最高経営責任者）はこう語る。A
Playwright × Gaugeで拓くE2Eの新境地 〜 社内の自前E2Eが最高な話｜Akihiro Yokota
こんにちは、アルプでQAエンジニアをやっているyokota(@katawara)です。 アルプではQAエンジニアの働き方として3つのロールがあり、以下のように分類されています。 ・リードQAエンジニア(L-QA) : 組織全体のQAプロセスを改善する責務を担う ・チームQAエンジニア(T-QA) : プロダクトチーム内のQAプロセスを改善する責務を担う ・オートメーションQAエンジニア(A-QA) : プロダクトチームが行っているテストとは別軸の自動テストを作成を担う QAエンジニアの幅広い業務を整理し、3つのジョブディスクリプションを作ってみた より引用この記事を書いている2024年5月現在では、一人でいろいろな帽子を使い分けているといった塩梅なのですが、今回はA-QAとしての帽子をかぶり、E2Eテスト（自動テスト）の話をしてみたいと思います。 アルプでのE2E事情アルプで使われているE
ExperienceUsed it: Respondents who have used an item.Heard of it: Respondents who have heard about an item, but haven't used it.Never heard of it: Respondents who have never heard about an item.SentimentPositive: Respondents who are interested in learning more about a technology; or are willing to use it again.Neutral: Responents who did not indicate any sentiment about a technology.Negative: Resp
速報！Java on Azure Day 2024 ――Playwright for Java、GitHub Copilotの新機能など注目テクノロジーが目白押し！ 日本マイクロソフト株式会社は2024年6月5日、同社では4回目となるJava on Azureに関するイベント、Java on Azure Day 2024を開催しました。今年はオンライン・イベントとして開催し、マイクロソフトにおける最新のJava関連技術やツールや企業での活用事例を紹介しました。 基調講演では、マイクロソフトにおけるJavaの最新アップデートやツールの紹介の他、マツダ株式会社におけるAzureの活用事例、そしてマイクロソフトにおけるエンタープライズ企業向けの技術支援サービスについても語られました。 本記事では、Java on Azure Day 2024の基調講演でマイクロソフトが発表した内容を速報として
週刊Railsウォッチ: Rails 8でKamalがデフォルトのデプロイツールになるほか（20240529前編）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。Rails 7.2.0のマイルストーン↓は、先週ぐらいには残り3つだったのが7つになったり5つになったりと変動しつつ、さっき見たら残り2つになっていました。 参考: 7.2.0 Milestone 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごと
こんにちは、SmartHRでキャリア台帳の開発を担当しているプロダクトエンジニアのhosoyaです。 今日は、私たちがどのようにPlaywrightを使ってキャリア台帳のE2Eテストを実装しているかについてお話しします。 なぜPlaywright？ E2Eの導入・運用の検討を始めた当時、SmartHRで運用されているE2Eは、Rspec x Selenium x Capybaraが主流でした。 キャリア台帳は新規プロダクトという事もあり、新しいツールの選定をしてもよいのではないかということでチーム内での検討がはじまりました。 採用理由に関しては以前紹介された「E2Eテストを Playwright で作り直して開発プロセスに組み込む話」とほぼ被ってしまうのですが以下のような理由になります。 PlaywrightはMicrosoftから公開されているE2Eテストフレームワーク 定期的な更新と新
2024-06-07: MSTest 3.4, OpenAI for .NET 2.0.0-beta.1, Serilog 4.0.0, Windows App SDK 1.6.0-experimental1 - WeekRef.NET
2024-06-07: MSTest 3.4, OpenAI for .NET 2.0.0-beta.1, Serilog 4.0.0, Windows App SDK 1.6.0-experimental1 トピックス MSTest 3.4 is here with WinUI support and new analyzers! - .NET Blog https://devblogs.microsoft.com/dotnet/introducing-mstest-34/ MSTest 3.4 がリリースされた。 このリリースでは MSTest.Analyzer の様々な改善とバグ修正、STA スレッドのサポート、フィクスチャーメソッドのタイムアウトサポート、MSTest.Sdk での Playwright や Aspire のサポート、MSTest.Runner の WinUI のサ
MSTest 3.4 is here with WinUI support and new analyzers! - .NET Blog
We are excited to announce the new release of MSTest, the popular testing framework for .NET. This release brings many enhancements and bug fixes to MSTest.Analyzers, new features and improvements for MSTest.Sdk, and adds support for WinUI applications to MSTest.Runner. We’ve added [Timeout] support to all fixture (initialize and cleanup) methods, and STA thread support for UI tests. Both were lon
はてなブログ独自の集計による人気記事のランキング。5月26日（日）から6月1日（土）〔2024年6月第1週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 戸籍の写しの取り寄せで214年前まで感慨深く辿っていく - Really Saying Something by id:toya 2 押井守版『攻殻機動隊』について原作者（士郎正宗）はどう思っているのか？ - ひたすら映画を観まくるブログ by id:type-r 3 壊れかけのレディオしか知らない状態で徳永英明のコンサートに行ったら、未曾有のカオスだった - もはや日記とかそういう次元ではない by id:manato-kumagai 4 麻雀漫画はいかにして生まれ、発展していったのかが凄まじい熱量と共に語られる、オンリーワンの通史──『麻雀漫画50年史』 - 基本読書 by id:huyukiitoichi 5 埼玉と
Appium初心者が、ReactNativeアプリを自動テストする試みの一部始終(随時更新) - Qiita
本記事の目的 弊社 (リプレックス株式会社) の関わっているプロダクトで、ReactNativeを使って作ったアプリがあるのですが、保守工数の削減のためにE2Eテストの自動化にチャレンジしてみることにしました。その際の技術選定の経緯なども含め、メモとして残すために書いています。 単なる殴り書きではなく、これからスマホアプリのE2Eテストの自動化を始めたい方が読む時に参考になる資料としても使えるように心がけて書いていこうとおもいます。 E2Eテストとは E2Eテストとは、 end to end test (エンドツーエンドテスト) の略です。end to endとは辞書を引くと「端から端まで」という意味です。UIテストはUI部分だけのテストですし、ロジックテストはロジック部分だけのテストですが、 E2Eテストは、システムが完成した状態で、UI,DB,Networkなど、全体がくっついた状態の
Playwright で ファイル選択はできるが formData が送信できない時は buffer を指定する
問題 公式に以下のような使用例があるが、 ファイル選択はできるものの、その後の実際にアップロード送信がうまくいかない // Start waiting for file chooser before clicking. Note no await. const fileChooserPromise = page.waitForEvent('filechooser'); await page.getByText('Upload file').click(); const fileChooser = await fileChooserPromise; await fileChooser.setFiles(path.join(__dirname, 'myfile.pdf')); 解決 fileChooser.setFiles の引数としてファイル本体を渡したつもりでも、画面に表示される「ファイル
Gaugeでテストを実施する - Qiita
はじめに はじめまして、河村康治です。HITOTSUアドベントカレンダーの18日目を担当します！！ 普段はバックエンドを主に担当しているのですが、テスト基盤構築に力をいれて行こうと思い、今回のアドベントカレンダーではフロントのテストに関して記載して行こうと思います！！！ 今回は、Gauge×Playwrightを活用したE2Eテストの記事を書いて行きます！！ちなみに、今回はPlaywrightの事は深く触れていないので、興味のある方はリンクを確認ください。 Gaugeとは？？ Webシステムの自動テストライブラリです。JS、C#、Java、Python、Rubyでテストコードが記載し、ブラウザ操作を自動でする事でテストの自動化に役立っております。最大の特徴はテストケースをMarkDown形式で記載でき、検証の目的やPointをコードと一緒に記載する事ができるため、保守開発がしやすい事です。
playwrightを使ってWEBのE2Eテストを自動化してみた 〜失敗談編〜 - Photoruction工事中！
こんにちは！株式会社PhotoructionでQAエンジニアをしています内田です。 Photoruction Advent Calendar 2021の14日目の記事です。 playwrightを使ってE2Eテストの自動化をすすめる上で失敗したこと・詰まったこととその解決策を記載していきます。 E2Eテストの自動化を検討中の方の役に立てたら幸いです。 目次 失敗したこと・詰まったことリスト 自動化の進め方・構成での失敗談 テスト実行時間が長すぎる テスト実行がコマンド実行できる人しかできない テストのどの箇所で落ちたのかがわからない テストで実行している内容が実装者しかわからない テスト実行によりデータ量がどんどん増えてく playwrightの使い方での失敗談 実行環境によってキャプチャ差分が出ちゃう ファイルダウンロードできない モーダルが完全表示される前に次の操作をしてしまう まとめ
E2E テストの決定版！ テスト開発の効率が爆上がりする Playwright (TypeScript版) - Qiita
E2E テストの決定版！ テスト開発の効率が爆上がりする Playwright (TypeScript版)フロントエンドVisualStudioCodeE2EテストCypressPlaywright E2E テストスイート Playwright はマイクロソフトが提供しているだけあって Visual Studio Code と高いレベルで統合されています。 E2E テストをステップ実行することができ、変数の値を参照（インスペクト）できます。もちろん、ブラウザーの様子も同時に確認できます。 現在テストがどこを実行中なのかがテストコードにリアルアイムに強調表示されるので、どこで意図せずに止まっているかがすぐに分かります。この機能は追うのが難しい非同期処理にも対応しているので非常に助かります。 テストを動かさなくてもコードにマウスを合わせるだけで、対応する GUI 部品がどこにあるかがすぐに分か
週刊Railsウォッチ: Rails 8からPropshaftがアセットパイプラインのデフォルトにほか（20240619前編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt
この記事はニフクラ 等を提供している、富士通クラウドテクノロジーズ Advent Calendar 2022 の7日目の記事です。 前日は@heriet さんの trivy+conftestで柔軟にライセンスポリシーをチェックする でした。 ライセンスポリシーのチェックをより容易に、汎用的にできるというのは魅力的で私自身すごく勉強になりました。 はじめに 初めまして！ 私は富士通クラウドテクノロジーズ2年目の社員で、基幹システムの運用・開発をしております。 今回は実際に私が部署で管理しているWEBアプリのE2EテストをPlaywightとGitlab CI/CDで自動化した経験から、自動化までの簡単な流れを書こうと思います。 E2Eテストとは E2E（エンドツーエンド）テストは、User Interface Testとも呼ばれております。 WEBアプリにおいて、ユーザの想定される操作に対し
AWS Amplify Gen2 ✖️ Nx(monorepo)✖️Next.js デプロイとサンドボックス作成まで - Qiita
AWS AmplifyGen2がGAされたので、Nxのmonorepo構成で作成したNext.jsプロジェクトを、バックエンドとフロントエンドで別個のAmplifyアプリとして分離して、デプロイしてみます。 茨の道 下記Gen2のドキュメントを参考に進めました。 記載されている内容が少なく、デプロイエラーで詰まると下記のドキュメントなどと併せて読む必要があり、全体像の理解に時間がかかりました。 Gen2のドキュメントには「バックエンドのみのコードをデプロイできる」とあるのですが、手順に従って進めてもリポジトリの構成を自動検出してくれない(自動検出結果がおかしい)、自動作成されるamplify.ymlのままだとデプロイエラーが出るなど、リポジトリのコードがおかしいのか、Amplifyのビルド＆デプロイロジックに問題があるのか良く分からず、だいぶ混乱しました。 ここでは無事にフロント＆バックエ
対象者 Cypressを使ったテストを書いたことがある人 RailsのRSpecを使ったテストを書いたことがある人 手動テスト辛い 私が担当している案件の中には、1年以上運用しているwebサービスがあります。 フロントエンド・バックエンド共に存在します。 課題は色々あるのですが、一番課題に感じているのがテストです。 そのサービスの前回の機能追加リリース時は、画面操作系のテストは手動で行いました。 そうなってしまった理由は大きく分けて以下3点です。 画面操作系の自動テストを書く時間がない 手動テストした方が早いという考えがある 今の画面操作系自動テストの仕組みでは画面操作後のDB値チェックができない この問題をなんとか解決したいという思いがあります。 単体テストが一番重要 まず大前提の話です。 単体テストとは、関数やメソッド単位での機能が期待通りであるかのテストです。 これまで色々とバグや障
結論 page.setViewportSize() を用いる。 具体例 公式ドキュメント に記載されているように page を以下のように作成したとします。 const page = await context.newPage() その後、以下のように setViewportSize メソッドで高さと幅を指定します。メソッド名が Puppeteer とは異なる*1ことには注意が必要です。 await page.setViewportSize({ width: 1920, height: 1080, }); 公式ドキュメント playwright.dev *1:Puppeteer の場合は setViewport メソッド
AWS LambdaでPlaywrightを使う(Python 3.10 + playwright1.42.0) - Qiita
スクレイピングにseleniumを使用していましたが、playwrightがかなり直感的で使いやすかったことから活用を始めました。また、実行環境をlambdaにすることで他のアプリケーションから利用しやすくすることもできるため、その方法をまとめておきます。 開発環境 Windows10 Home 22H2 Python 3.10.4 playwright 1.42.0 1.playwrightを利用した機能を実装する ローカルで普通に実装します。ブラウザオブジェクトを作る際には次のオプションを指定しておきます。今回は図書館のHPにアクセスして貸出状況を取得するスクレイパーを実装しています。 browser = playwright.chromium.launch( args=[ "--disable-gpu", "--single-process", ], ) 2.lambdaから利用する
はじめに 2024年5月7日にplaywright version 1.44.0がリリースされました。 この記事ではv1.44.0の新機能について紹介します。 assertionsの新機能 toHaveAccessibleName どんな機能か locatorが指定されたアクセシブル名を持つ要素かどうかをみる。aria-labelとaria-labelledby の名前を見る サンプルコード import { test, expect } from '@playwright/test'; test('sample toHaveAccessibleName', async ({ page }) => { await page.goto('https://hotel.testplanisphere.dev/ja/'); const locator = page.getByRole('butto
Aquaは、約1年半前に行われたプレビューバージョンのリリース以来、CypressやPlaywright、Seleniumをサポートすることで大きく進化している。 今回の一般公開にあたっては、Aquaに対するフィードバックを送ってくれた開発者への感謝や、テストコミュニティの成長を促進する取り組みとして、有料の商用ライセンスに加えて、無料の個人用非商用ライセンスが新たに提供されるようになった。 なお、サブスクリプション契約に基づいて、直接的または間接的に定期的な収入を得ている製品ユーザーによる活用は、商用利用に分類される。また、非商用ライセンスを利用するユーザーは、匿名の使用統計集計からオプトアウトできない。 Aquaは、テスト自動化専用に設計された初のIDEであり、テスト自動化で使用される主要な言語である、Java、Python 、JavaScript、TypeScript、Kotlin、
はじめに 自己紹介 こんにちは。 ミツモアのQAエンジニアの山本です。 1人目のQAエンジニアとしてチームを立ち上げ、現在はミツモア, MeetsOneの2つのプロダクトのQA全体のリーダーとして日々プロダクトに向き合いつつ、楽しく働いています。 ミツモアは「テクノロジーでシンプルに」をバリューとしており、継続的インテグレーションとリグレッションテストの効率化の観点からE2E自動テストを重視しています。 QAチームでは全員が手動テストも自動E2Eテストも行っており、今年は安定性向上や自動テスト実行スピードアップ, 安定性向上などを狙ってAutifyからPlaywrightへ移行しました。 今回はPlaywrightで秒数指定wait処理のハードコードを避けてスマートにする方法をご紹介します。 よくあるwait処理の悪い例 await page.locator('input[name="em
E2Eテストの自動化観点でのブラウザ操作のけるSelenium周りの言葉の定義と関連事項の整理 - Qiita
概要 似たような言葉があって混乱したので、整理することを目的としたメモ。 あくまでも私が理解し易い視点、であることに注意。 Webアプリケーションの画面に対するE2Eテストの実行を自動化する実装場面が検討の対象。テストコードとノーコードツールで分岐することを検討したうえで、テストコードでの実装を選択する。その実装に用いるライブラリを比較検討する中で、Selenium周辺の言葉の定義の整理を目的とする。 ツールの比較そのものではなく、言葉の整理が目的であることに注意。 整理の起点 次の通り。 E2Eテストとして、WebアプリケーションのUIに対する機能テストを対象とする テストを自動化することは、つまりコマンドラインから実行出来ること、を意味する コマンドラインからUIテストを実行する方法として、次の2つがある (A) テストコードを用いて、ブラウザーを操作するためのAPIを呼び出す (B)
CodeceptJSにトライしてみた。 - Qiita
最初に 本記事はGitHub: GOAMI-Takaaki/codeceptjs-hotel-planisphereの転記になります。 概要 自動化練習サイト「HOTEL PLANISPHERE」を対象に、Gherkin記法のテストを、CodeceptJS で実装したサンプルコードを紹介します。 対象 サービス HOTEL PLANISPHERE - 自動化練習サイト シナリオ testplanisphere/hotel-example-webdriverio-ja 構成 自動化フレームワーク CodeceptJS + Playwright プログラミング言語 TypeScript テスト記法 Gherkin 環境 ライブラリ Node.js OS WSLg + Ubuntu 22.04.2 LTS 基本 CodeceptJS とは E2Eテストフレームワークである。 Node.jsプロジ
PlaywrightでVisual Regression Test実装する＋便利そうなオプションの紹介 - Qiita
✔ Do you want to use TypeScript or JavaScript? · TypeScript ✔ Where to put your end-to-end tests? · tests ✔ Add a GitHub Actions workflow? (y/N) · false ✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true 下記のファイルを指定階層(playwright_vrt)にインストールできます、これでplaywrightのインストールは完了です。playwright.config.ts内でデフォルトでChormium,Firefox,Webkit環境でのテストが指定されていますのでテスト内容によってここを修正する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Playwright]VScodeの拡張機能でらくらくブラウザ操作
［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
Visual testing is the greatest trick in UI development
AIデバイス「rabbit r1」を買ったら「その機能は準備中」を連発する詐欺的製品だっという報告
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
テスト自動化実践ガイド 継続的にWebアプリケーションを改善するための知識と技法 | 翔泳社
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)
テスト自動化の潮流をケース作成に「遡上」、Autifyが作業半減うたう新ツール
State of JavaScript 2023: Libraries
速報！Java on Azure Day 2024――Playwright for Java、GitHub Copilotの新機能など注目テクノロジーが目白押し！ | gihyo.jp
キャリア台帳のE2EテストでPlaywrightを利用している話 - SmartHR Tech Blog
今週のはてなブログランキング〔2024年6月第1週〕 - 週刊はてなブログ
playwrightとGitlab CI/CDでE2Eテストを自動化してみた - Qiita
PlaywrightをRailsに導入して手動テスト工数を減らす - Qiita
Playwright でブラウザのサイズを変える方法 - 約束の地
Playwright v1.44.0の新機能をまとめてみる - Qiita
JetBrains、テスト自動化用IDE「Aqua」を一般公開。無料で利用可能なライセンスを新設
Playwrightで秒数指定wait処理を避けてスマートにする - Qiita