playwright

こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。 ビュー機能とは ローカル環境で開発したい bm-view-previe…

はじめに こんにちは、Red Hat のコンサルタントの陳です。今回は、Red Hat Developer Sandbox を利用し、GitOps の開発を簡単に試せる手順をご紹介します。より実践的な内容で OpenShift の魅力を感じていただければと思います。 目次 Red Hat Developer Sandbox とは？ GitOps とは？ このブログで得られるもの リポジトリの紹介 仕組みの紹介 実施手順 おわりに 1. Red Hat Developer Sandboxとは？ Red Hat Developer Sandboxは、誰でも無料で手軽にOpenShiftを体験できる…

エムスリーキャリアでQAを担当している川浪です。 本記事ではPlaywrightでHelperファイルを作成してE2Eテストを実行する方法をご紹介します。*1 本記事の前提条件 Helperファイルとは？ Helperファイルの作成 specファイルの作成 まとめ 本記事の前提条件 本記事の前提条件は以下の通りです。 Playwrightをインストール済み（使用するスクリプト言語にTypeScriptを選択） Visual Studio Code（VSCode）をインストール済み、かつ、VSCodeの機能拡張「Playwright Test for VS Code」をインストール済み Help…

導入 PlaywrightやReg SuitなどのVRT（Visual Regression Testing）の結果は、HTMLで出力されます。Playwright のヘルプ1 でもレポートをダウンロードして確認する方法が記載されていますが毎回行うのは面倒です。また、レポートをGitHub Pagesにデプロイする方法もありますが、アクセス制限にはEnterpriseプランが必要だったり、Pull Requestごとの結果を保存するのに手間がかかるなどの問題があります 2 3。Amazon S3にレポートを置く方法もアクセス制限が面倒なことが知られています。 そこでこのエントリでは、レポートを…

関連記事 概要 参考情報 関連記事 GitHub - devlights/blog-summary: ブログ「いろいろ備忘録日記」のまとめ 概要 以下、自分用のメモです。 先日、JetbrainsのRust用IDEであるRustRoverがリリースされたってメモを書いたのですが devlights.hatenablog.com リリース情報みたら、テスト自動化用のIDEである Aqua もリリースされてたのですね。 blog.jetbrains.com www.jetbrains.com RustRoverと同じく、個人の非商用利用の場合は無償とのこと。 All Product Packを持っ…

dockerコンテナ上のアプリをAWS Lambda上で呼び出すには、awslambdaricというのが必要なようです。 dockerイメージは以下のようになります。 # Define custom function directory ARG FUNCTION_DIR="/function" FROM --platform=linux/amd64 python:3.10-slim-bullseye ENV TZ="Asia/Tokyo" # Include global arg in this stage of the build ARG FUNCTION_DIR # Install aws…

はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwrigh…

こんにちは、iimonの検索チームでフロントエンドエンジニアを担当している保田です。今回は、ReactにStorybookを導入して、インタラクションテストを試してみたことを記事にしました。 Storybookとは？ Storybookは、UIコンポーネントのカタログ作成・テストなどができるツールです。 デザイン確認やユーザーインタラクションのテストが簡単に行えます。 主にReact、Vue、Angularなどのフレームワークで使用されることが多いです。 導入することのメリット・デメリット メリット すでに作成済みであるコンポーネントなどが分かりやすくなる コンポーネントの状態確認がしやすい …

既存のDocker環境にPlaywrightを導入する手順をご紹介します。ここでは、テスト対象のサーバーがRailsで動作しているケースを前提に進めていきます。 なぜDockerでPlaywrightを動かすのか？ 1コンテナ1サービスの原則に従う場合、Playwrightサービスは別コンテナで動かすことが推奨されます。これにより、既存のDocker環境を汚さずに済み、Playwrightに必要な環境が既に整っている状態で導入が可能です。また、依存関係を分離することで、環境構築やメンテナンスがより簡単になります。 Playwright導入のためのコード PlaywrightをDockerで実行…

はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 今回は NewsPicks WebにおけるPlaywrightでのユーザー行動ログのテストの取り組みを紹介させていただきます。 ログについて NewsPicks では法人向けサービスや広告システムがあり、法人向けサービスや広告パフォーマンスのレポート、またKPIの追跡などログデータの信頼性がビジネスに直結しています。ログはただの記録ではなく、ビジネスインサイトを得るための重要なデータソースです。 そのため、ログが正確に記録され、リクエストが期待通りに発生しているかをテストで保証することが不…

こちらの本を読みました。とっても勉強になりました！ フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 [ 吉井 健文 ]価格: 3080 円楽天で詳細を見る 読もうと思ったわけと感想 テストを導入の必要性はとても感じているけれど、仕事でなかなかテストを書く機会に恵まれず…。 そもそも自分がフロントエンドのテストって何すればいいのかよくわかっていなかったので、提案もままならず…なので、まずは知識をつけたいと思ってこちらの本を読みました。フロントエンドのテストに関して体系的にまとめられている本はほとんどお見かけしないので、本当にありがたいです。 結果、読む前と…

9/27 - 9/29という日程で開催された。BunkyoWesternsのst98として参加して4位。早々に(3番目に)全完していたし問題の追加もないというアナウンスを確認していたので、3位は確定かと思っていたが、後から抜かれてしまった。どういうことかと思ったら、1位のチームはスコアサーバのマズい脆弱性を見つけており、これでボーナスポイントをもらっていたらしい。 Qualsと名前に付いていることからわかるように、決勝大会は11/28 - 11/29でブカレストで開催される。形式はA&Dらしい。15チームが予選から招待されるということなのでおそらく通過できているが、参加するかについてはどうだろ…

yusukeiwaki.hatenablog.com こんな記事を書いたのはもう３年も前になるが、実はMacbook 12インチは結局スペック不足で早々に手放し、 Dockerが満足に使えるMacbook Air 2020 (Core i7 + 16GB/512GB)に乗り換え、さらにはM2, M3あたりの高性能さがほしいと思って、今年になって20万以上するMacbook Air 15インチ (M2, 16GB/1TB) に乗り換えてきた。 ここまで申し分のないスペックのPCを買ったはいいが、実際そんなに活用ができていない。もちろんそのへんのネット閲覧だけとかではなく、DockerとかNode…

knowledgework.connpass.com こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。 会の概要 会の様子 コンポーネントのテストとして採れそうな手法と、その効果を考える 上手に付き合うコンポーネントテスト 急拡大するナレッジワークの開発組織を支える E2E テスト基盤 会全体を通した感想 会の概要 以下、イベントページから引用です。 フロントエンドのテスト、書いてますか？ 何を目的にテストを書くのか、どこまで書いたらいいのか、どう書くのがいいのかなどなど、フロントエンドのテストに関する悩みは色々とあるかと思います。 今回はフロントエンドのリアーキテ…

久しぶりのブログ更新です 技術や日常についてのアウトプットを残していこうとブログを再開しようと思います... 今回は久しぶりの投稿なので、直近2年半のキャリアについて振り返ります！ これまでの業務経歴を振り返る 2022年4月に新卒でのキャリアをスタートさせ、現在に至るまでITエンジニアとして2年半のキャリアを歩んできました。 その中で インフラ運用のチーム プロダクト開発のチーム (転職を挟んで) SREチーム と、3つのチームでの業務を経験しました（1年ごとにチームが変わっている・・） 以下は具体的に経験した業務内容です インフラ・クラウド周り 3層アーキテクチャのWebアプリにおけるAW…

2024/9/20 https://knowledgework.connpass.com/event/327800/ コンポーネントのテストとして採れそうな手法と、その効果を考える nus3さん（サイボウズ株式会社） https://speakerdeck.com/yotahada3/frontend-component-test コンポーネントテスト 対象のコンポーネントをレンダリングしてテストする 前はjestやtesting-library 最近はPlaywrightとかでも vitest ブラウザモードができた jsdomとPlaywright/chromeとか切り替えられる Play…

発生したエラー npm initコマンドを実行したところ、以下のエラーが発生しました。 dyld[84022]: Library not loaded: '/usr/local/opt/icu4c/lib/libicui18n.71.dylib' Referenced from: '/usr/local/Cellar/node/19.1.0/bin/node' Reason: tried: '/usr/local/opt/icu4c/lib/libicui18n.71.dylib' (no such file), '/usr/local/lib/libicui18n.71.dylib' (no…