Storybook 8.3 のリリーつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story globa
PR TIMESフロントエンドのCI パイプラインを改善して、CI 処理時間とBillable Time を50%を削減した話 | PR TIMES 開発者ブログ
ここんにちはPR TIMES開発本部のインターンの Chanoknan です。 PR TIMESについてフロントエンドのCI パイプラインを改善についてお話しします。 PR TIMESでは、Reactで書かれたすべてのフロントエンドのコードのコードはMonorepo として管理しています。 そのMonorepoのCI パイプラインは、システム全体のLint、Type Check、Test、Buildを行うようにCIパイプラインが設定されており、これにはかなりの時間がかかり、GitHub ActionsのBillable Timeにも影響を与えます。これを緩和するため、CI処理時間を減らすためのいくつかの戦略を実施しています。詳細については、以下の記事を参照してください。 改善できる点を特定する この作業に取り組む前、私はCIパイプラインやGitHub Actionsについて詳しくありません
tl;dr OGP 画像を satori (@vercel/og が内部で利用しているもので、JSX を SVG に変換するなんかすごいライブラリ) で生成していたが、運用上微妙だったので Playwright を使った生成に変えた 生成の所要時間は伸びてしまったが、挙動が安定しているため安心して運用できるようになった モチベ satori のテキスト周りのスペーシングの挙動がコロコロ変わりすぎて、安心して使い続けるのが難しかった 具体的には改行を含む右揃えテキストで最終行以外の末尾が変に空いてしまう事象などが発生した 特に困ることに、このような挙動変化が patch リリースでしれっと引き起こされ、リリースノートで特に言及されることもなくまた patch リリースで修正されたり、また別の挙動に変わったりする 実際前述の事象関連では v0.10.x 台だけ(つまり patch リリースのみ
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vol.08 5時間から20分へ：PlaywrightとGitHub Actionsで高速・多ブラウザE2Eテスト - Sansan Tech Blog
こんにちは。Strategic Products Engineering Unit SREグループの辻田です。 みなさんはE2Eテストを実施していますか？E2Eテストは、ユーザの操作に近いシナリオをシステム全体で検証する重要なプロセスですが、手動や複数ブラウザでのテストは時間がかかり、頻度も低くなりがちですよね。 今回は品質、信頼性向上を目的に、PlaywrightとGitHub Actionsを使ってE2Eテストの自動化を実現し、テストを高速化・多ブラウザ対応にした経験について紹介します。 なお、本記事は【Strategic Products Engineering Unitブログリレー】という連載記事のひとつです。 Before: 5時間かかっていたChromeのみのテスト 導入前は、E2EテストはChromeに限定して実行していましたが、それでも約5時間を要していました。スプシで管理
ビジュアルリグレッションテストは、ウェブアプリケーションやウェブサイトのUIが変更された際に、意図しない視覚的な変更や劣化が発生していないかを検証するための手法です。特に、JavaScriptを使った動的なUIが増えている現代のウェブ開発において、ビジュアルリグレッションテストは欠かせない要素となっています。本記事では、JavaScriptプロジェクトにビジュアルリグレッションテストを導入し、効率的に運用するための手法を詳しく解説していきます。これにより、UIの品質を保ちながら、開発プロセスをスムーズに進めることが可能になります。 ビジュアルリグレッションテストとは ビジュアルリグレッションテストは、ソフトウェアやウェブサイトの更新後に発生する可能性のある視覚的な変化を検出するためのテスト手法です。具体的には、新しいコードが追加されたり、既存のコードが修正された際に、ユーザーインターフェー
はじめに コンポーネント駆動開発において欠かせないツールとなっているStorybookですが、最新のv8.3では新たにVitestプラグインが導入され、テストの方法が大きく進化する気配を感じました。この記事・動画では、Vitestプラグインがもたらす新たなテストアプローチとその利点について見ていきます。 Storybookを活用したテストに関しては前回の記事でも触れました。 記事では概要を紹介し、もし気になるトピックがあれば動画を見ていただけたらと思います。 Vitestプラグインの概要 「堅牢なテスト手法」を共有したつもりが、数日後にStorybook8.3が発表されてVitest Pluginが登場して、黒船感がちょっとあります。 「StorybookのInteraction Testは微妙」と言っていたのが「StorybookのInteraction Test最高か」に変わりそうです
PR TIMES Webクリッピング｜広報・PRの分析・効果測定ツール 自動でWeb記事収集ができるWebクリッピング機能をPR 広報・PRの効果測定のためのクリッピングなら「PR TIMES Webクリッピング」。プレスリリース配信後の露出調査から競合... 何をやったのか 今回、クリッピングの新機能として「クリッププレビュー」機能を実装しました。この機能について簡単にご紹介します。 上記画面はクリップ作成画面です。画面の最下部に「クリッププレビュー」ボタンがあり、クリップ名とキーワードを最低1つ入力した後、このボタンを押すと モーダルが開き、入力されたキーワードを含む記事が表示されます。この機能は、お客様がクリップを作成する際に、適切なキーワードを選定するのに役立つことを想定しています。 フロントエンド開発では主に以下の実装を行いました。 クリッププレビューボタンの実装 モーダルの実装
E2EテストのPlaywrightを使ってみた | クラウド・AWSのIT技術者向けブログ SKYARCH BROADCASTING
目次 はじめに E2Eテストとは Playwrightの環境構築 Playwrightの実行 基本的なコード このような機能も まとめ はじめに あるWebシステムにて、テキスト入力欄やボタン選択が複数ある画面を作ることになりました。 そこで、テスト工程をどのようにしたら効率良く実施出来るのか検討および調査したところ、 テスト自体を自動化してみようとなりました。 E2Eテスト自動化ツールは、たくさん種類があり比較した結果、Playwrightというツールを選定することにしました。 E2Eテストとは End-to-Endの略。 システム全体のテストを実施することで想定通りの動作となっているか一連のテストを行うこと。 Playwrightの環境構築 実際にPlaywrightのインストールと初期設定を行います。 Node.jsがインストールされている前提となります。 インストール // Pla
フロントエンドフレームワークは SolidJS + SolidStart 軽量・高速で学習コスト低い。SolidStart が v1 になり CSR、SSR、SSG をカバーする選択肢の1つになっている。 ファイル・ディレクトリベースのルーティングもかなり柔軟に作れる 状態管理は Signals SolidJS を使うと状態管理は標準で Signals になるがこれがよいと思う。 UI コンポーネントキット・CSS周りは ParkUI（Ark UI + Panda CSS） Ark UI は Radix UI のレイヤー。shadcn 的なものが Park UI。shadcn のスタイリングは Tailwind だが、Park UI は Panda CSS を採用している。（以前は Panda CSS / Tailwind の両対応だったがPandaに1本化された経緯がある） スタイリング
こんにちは！株式会社ユーザベース SaaS事業 Product Team の斉藤・度會・沖です。 業務では主に Elixir / TypeScript / Go を用いて、経済情報サービス「スピーダ」の開発・運用を行っています。 はじめに みなさんは外形監視はなにでやっていますか？ 今回はPlaywrightを使ってWebサービスの簡易的な外形監視を作ってみたので、その紹介をしていきます！ 外形監視を入れたかった動機 スピーダのアジア版の一機能で、各分野に紐付いた直近2件のM&A案件を見られるという機能があります。以下のスクリーンショットのように、タイトルが2件表示されるという仕様です。 そのM&A案件を2件取得するために、ElixirやGoなどでできた各マイクロサービスが連携しています。 今回はこのM&Aのタイトルが二件表示されているかと、リンク先が有効になっているかをチェックするために
LangChainのWebBaseLoaderでWebページの内容が取得できない場合の対処法 - Qiita
import json import os os.environ["USER_AGENT"] = ( "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36" ) from langchain_community.document_loaders import WebBaseLoader loader = WebBaseLoader( web_path="https://openai.com/index/introducing-openai-o1-preview/", ) documents = loader.load() for document in documents: print("--- page_content
たまにPlaywrightをLambdaで動かしたくなりますよね。 すでにいろいろな方が挑戦されているようで、簡単に使えるLambdaレイヤーが公開されているようです。 ただ、そういうことじゃないんです。自分でやることに意味があるんです。なんとか動作しましたので、ご紹介。 きっかけ 先日投稿したこちらの記事で、LangChainの「AsyncChromiumLoader」を紹介しました。 これをLambda化したいなぁと思ったのがきっかけです。（そしてBedrock Agentsから呼び出したい） AsyncChromiumLoaderは内部でPlaywrightが使われているのですが、先ほど解説した「chromium.launch」の呼び出し部分のargsを外部から指定する方法がなかったので、素のPlaywrightを使って検証しました。 Lambda化ができたので、あとはBedrock
E2Eテスト自動化、時代はノーコードorコードベース？
今回取り上げるツール Magicpod Playwright そもそもこれらはなに？ E2Eテスト自動化ツールのこと。 この2つの大きな違い ノーコードツールかコードベースツールか 有償か無償なのか 👽そもそもE2Eテストとは システム全体を通してテストを行うこと ユーザと同じようにブラウザを操作し、挙動が期待通りになっているかを確認するテスト。 これらを使い比べて感想を述べてみたいと思います！ ※どちらのツールも初心者なのでこっちはこんなことができるんだぞ！などがあればコメントでお叱りください.. 🎭まずPlaywrightとは コードベースのE2Eテスト自動化ツール やってることは要素を特定して、その要素に対して何らかのアクションを行わせる 例) 画面内にあるボタン要素を特定する → それに対してクリックを行う みたいな 🔮ではMagicPodは？ 特徴 1.ノーコードツール 同
テスト自動化を行う際、毎回ログイン処理を挟むのは手間がかかり、テストの実行時間も増えてしまいます。そこで、ログインを一度だけ行い、そのセッション情報を再利用する方法をご紹介します。 背景 Playwrightを使用してE2Eテストやビジュアルリグレッションテスト（VRT）を行っていると、各テストごとにログイン処理を実装するのは煩雑です。特に複数のテストケースがある場合、ログイン処理が繰り返され、テスト全体のパフォーマンスにも影響を与えます。 解決策：認証状態の共有 PlaywrightのstorageState機能を利用することで、一度ログインした認証状態を保存し、他のテストで再利用することが可能です。これにより、ログイン処理を各テストから省略し、テストの効率化を図ることができます。 実装手順 1. グローバルセットアップスクリプトの作成 プロジェクトのルートディレクトリにglobal-s
はじめに この記事では、Vitest と Playwright という2つテストを実行するための設定方法について記載します。 開発環境 開発環境は以下の通りです。 Windows11 VSCode Node.js 20.5.0 yarn 1.22.19 TypeScript 5.3.3 React 18.2.0 Vitest 1.3.1 Playwright 1.42.1 背景 元々 Vitest を利用して、単体テストや結合テストを書いているプロジェクトがありました。そちらに E2E テストとして、Playwright をインストールしました。インストール直後のテストファイルの構成やテスト実行のスクリプト、設定ファイルは以下の通りです。 import react from "@vitejs/plugin-react"; import type { UserConfig } from "v
これは何？ GitHub Actionsを使ったPHPのCI環境のセット（静的解析テスト ⇒ ユニットテスト ⇒ E2Eテスト）を、できるだけ最小構成で作っていきます。 前提 Docker 手元にDocker環境入っていない人は先にインストールしておいてください node >= v20 自分は普段Volta使ってますが何でもいいです レシピ DockerでPHPの環境作る（3分） テスト対象の機能と画面作る（2分） PHPStanで静的解析の設定（1分） PHPUnitでユニットテストコード用意（2分） PlaywrightでE2Eテストコード用意（3分） GitHub Actionsでテスト実行（4分） ブランチの保護（＋α） それではやっていきましょう。 1. DockerでPHP環境作る（3分） version: '3' services: php: build: ./build c
【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第11章「Playwrightの内部構造」＆付録（最終回）｜たぐち
【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第11章「Playwrightの内部構造」＆付録（最終回） はじめにこんにちは。ラクス フロントエンドチームのたぐちです。 今回は輪読会の実施レポートvol.9（最終回）です。 書籍と読書範囲 ［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで(画像はこちらより引用)今回の読書範囲は第11章 Playwrightの内部構造＆付録のP202～P236です。 議論・意見交換 議論の様子(miro)学び、ギモン、その他の三軸で付箋を張り付け、付箋の内容を左上から順に読んで議論していきました。 実際の議論順で内容を確認していきます。 学びp.202 ChromeDevtoolProtco
GPTを活用した開発では、AIが生成する出力の正確性を判断するスキルが欠かせません。すべてをGPT任せにせず、開発者自身の積極的な関与が求められます。 本記事では、最近手がけた2つの個人Webアプリ開発を例に、GPT駆動開発の実践方法とその効果をご紹介します。 開発フローと使用ツール 以下のダイアグラムは、GPTを活用した開発フローを示しています。この図は DiagramGPT を使用して作成しました。 ※ ダイアグラムを直接ご覧になりたい方は、こちらからご確認ください。 私は主にディレクションを担当し、ChatGPTやV0などのGPTツール（以下、GPTs）に具体的な指示を出して成果物を作成しています。ツールは以下のように使い分けています。 汎用的な用途：ChatGPT デザイン：V0 UIコンポーネント：ui.shadcn アイコン：LogoAI ※現在は他のツールを検討中。良いものが
スクロール fetchして5つ要素が返ってくる スクロール fetchして5つ要素が返ってくる みたいなよくあるInfinitieScrollを自前で実装してる部分があり、例えば5回くらいスクロールした結果降ってくる要素をexpectしたい ググる 適当なワードでggるとここら辺が出てくる elementHandle.scrollIntoViewIfNeeded([options]) こんなものがあったりするが弊環境では正常に動作しなかった 解決方法 引き続きggってるとこんなものを見つけた mouse.wheel(deltaX, deltaY) 幸い、今回はページ全体の縦スクロールとは別に特定の要素のみがoverflor-y: scroll;かつ無限スクロールな感じなのではなく、ページ全体のスクロールに連動して無限スクロールが発火するモノだったのでこちらで行けた let target =
こんにちは MaromaroのTakaです。 今回はWindows機でSafariブラウザとほぼ同等のブラウザテストをする方法をご紹介します。 元々AppleからWindows向けにSafariのブラウザは提供されていましたが、 2010年に提供とサポートを終了しているようです。 https://support.apple.com/ja-jp/102665 コーディングなどをしているとブラウザチェックが必須になりますが、 どうしてもWindows機だとSafariが使えず不便ですよね。 ブラウザのエミュレーターサービスはありますが、 有料で割高のため、手が出しにくいと思います。 今回ご紹介するのは無料でローカル環境でのブラウザチェックが出来る方法となります。 ただ、注意点としてSafariそのものではなく、 Safariと同じエンジンを使用したブラウザで確認となるので、 基本的な動作確認は
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 今回は NewsPicks WebにおけるPlaywrightでのユーザー行動ログのテストの取り組みを紹介させていただきます。 ログについて NewsPicks では法人向けサービスや広告システムがあり、法人向けサービスや広告パフォーマンスのレポート、またKPIの追跡などログデータの信頼性がビジネスに直結しています。ログはただの記録ではなく、ビジネスインサイトを得るための重要なデータソースです。 そのため、ログが正確に記録され、リクエストが期待通りに発生しているかをテストで保証することが不可欠になります。 ログシステムについて説明するとまずユーザーの操作をトリガーにして、Webフロントエンドもしくはアプリからリクエストが飛びます。リクエストをサーバーで受けデータストアに保存し、その後ワ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
OGP 画像の生成を satori (@vercel/og) から Playwright に変えた
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
Release v1.47.0 · microsoft/playwright
JavaScriptでのビジュアルリグレッションテスト導入と実践手法 | IT trip
Storybook v8.3で進化するコンポーネントテスト手法：Vitestプラグインの実力
バックエンドエンジニアから見たフロントエンド開発の魅力と学び | PR TIMES 開発者ブログ
次のフロントエンドプロジェクトの技術スタック - 2024 Autumn
Playwright で簡単な外形監視をやってみた - Uzabase for Engineers
Playwright PythonをAWS Lambdaで動かす - Qiita
VRTでPlaywright のグローバルセットアップ
Vitest と Playwright でテスト実行 - Qiita
GitHub ActionsでPHPのCI環境作る（15分で） - Qiita
GPT駆動開発：GPTsと共に進める効率的なアプリ開発
Playwrightで無限スクロールに対応し特定の要素が出るまで執拗にスクロールし続ける
WindowsでSafariと同等のブラウザを使用する方法 | Maromaro Blog
Playwrightでのユーザー行動ログのテスト - Uzabase for Engineers