ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
JavaScript is undoubtedly the most used programming language in the world and is hugely influential on one of the largest technologies we have all come to rely on – the internet. With this power comes great responsibility, and the JavaScript ecosystem has been rapidly evolving, making it incredibly hard to keep up with the latest JavaScript best practices. In this blog post, we will cover several
テスト自動化の協業を加速する！ テックタッチのフロントエンドにおけるテストの分類 - Techtouch Developers Blog
フロントエンドエンジニアの 92thunder です。去年北海道旭川市に移住しまして、長らく打ち合わせを続けてきた家が10月にデプロイされたのでQoLが爆上がりしています。 テックタッチではデプロイ頻度を上げるためにテスト自動化に取り組んでいます。テスト自動化をQAエンジニアと進めていくためにテストの分類を策定する取り組みを始めました。この記事では、テックタッチにおけるフロントエンドのテストの分類とそれを策定するにあたって意識したポイントについて説明します。 デプロイ頻度改善のため、テスト自動化に取り組む なぜテストの分類が必要か テストの分類 コンポーネントテスト インテグレーションテスト テストの分類で意識したこと テストサイズを意識してコスパの良い自動テストへ 一般的な分類より、社内でのテストの呼び分けやすさを重視 おわりに デプロイ頻度改善のため、テスト自動化に取り組む テックタッ
Rails: システムテストのドライバをSeleniumからPlaywrightに差し替えたら安定した（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Running Rails System Tests with Playwright instead of Selenium | justin․searls․co 原文公開日: 2024/06/18 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 先週、DHHが「システムテストの導入は失敗だった」と宣言したとき、私の最初の心の声は「まあそうだろうね」でした。UIテストはもろいうえに、テスト件数がある程度以上になると、アプリが動作しているという確信をもたらしてくれるUIテストのありがたみよりも、UIテストをメンテナンスするコストの方が上回ってしまう可能性があります。 しかし、私の次なる心の声は「考えてみれば、Turboに強く依存した複雑なUIに対して
はじめに enechainでのQA業務 enechainの目指すQAとは 今後の展望 最後に はじめに はじめまして。enechainのQAエンジニアのtaise-です。 enechainは電力や環境価値といったエネルギーのオンラインマーケットプレイスを運営する会社です。私は、電力取引を仲介する社内のブローカーのブローキング業務を支援する社内ツールのQAを担当しています。 enechainにQAチームが発足して約3年が経ち、会社が急成長を遂げる中でQAチームの形もそれに合わせて常に変化し続けており、現在は複数同時並行で開発・運用されている各プロダクトを、QAエンジニアがそれぞれ1名専任で担当するチーム体制となっています。 この記事では、私の担当プロダクトにおけるQA業務と、そこで得た成果や課題について紹介します。 プロダクト専任体制のQAエンジニアが業務の中でどう立ち回り、どんな価値貢献が
ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。 弊社では Nx を活用してCIを高速化しています。この記事では、最近導入した Nx Agents でフロントエンドのCIをさらに高速化した事例を紹介します。 Nxについては以前の記事で紹介しておりますので、気になる方は是非ご覧ください。 tech.findy.co.jp フロントエンドのCIの課題 Nx Agents Nx Agents導入の結果 Nx Agents利用上の工夫 プロジェクトを細かく分割する Node.jsのバージョンを揃える キャッシュの活用 特定のステップの省略 高度なエージェント割り当て まとめ フロントエンドのCIの課題 これまで「キャッシュの活用」や「並列化」「マシンスペックの向上」といった工夫により、フロントエンドのCIを高速化してきました。 しかし、コードベースの増大により時間
積読が崩せないので読書記録サービスをつくった
背景と動機 本をよく買います。 気になった技術書や小説、漫画など、社会人になってからは特に買う頻度が増えたように思います。 しかし、読む時間がなかなか取れなかったり、期間が開いてどの本を読んでいたのか忘れてしまったりして、気付いたら積読が積み上がり「あ～やべ…」と感じることが多くなっていました。 「今読んでる本」をシンプルに管理できる何かがあれば、この状況を打破できるのでは…！と思ったので、読書記録サービスをつくってみました。 つくったもの yondako という読書記録サービスをつくりました。 GitHub か Google アカウントで登録できます。 デモ動画はこんな感じです。 「よみたい」「よんでる」「よんだ」の3状態で読書状況を記録できます。 レスポンシブ対応もしていて、スマホからも利用できます。 SNS的な要素や感想の記録などをあえて排除して、読書状況の記録に特化しているのが特徴
ハナユメのフロントエンドにSvelte/SvelteKitを採用しています - Ateam Tech Blog
こんにちは。エイチームライフデザインでハナユメという結婚式場情報サイトの開発を行っている大江です。 ハナユメは長い間、PHP/Symfonyを用いて開発・運用されてきました。しかし、プロダクトの成長と機能の複雑化に伴い、技術的負債が蓄積してきました。そこで、数年前からこの課題を解消するために、フロントエンドをSvelte/SvelteKitで置き換えるプロジェクトを始めました。現在では、検索ページ、式場詳細ページの一部、リングページなどいくつかのページをSvelte/SvelteKitでリリースしています。 今回は、Svelte/SvelteKitを選んだ理由や、実際に導入してみて感じたことについてお伝えします。 Svelte/SvelteKitを選んだ理由と実際に開発して良かったこと コード量が少なく書ける 以下は、ReactとSvelteで入力内容を同期してテキストを表示するコンポーネ
JSer.info #711 - Deno v2.0.0がリリースされました。 Announcing Deno 2 Deno 2.0 Release Candidate Node.jsとの互換性の改善、JSRのサポート改善、Workspaceのサポートなどが行われています。 Deno 1.xから2.xへのマイグレーションガイドも公開されています。 Deno 1.x to 2.x Migration Guide TypeScript 5.7 Betaがリリースされました Announcing TypeScript 5.7 Beta - TypeScript 初期化されてない変数のチェック、相対パスの.tsを出力時に.jsへと書き換える--rewriteRelativeImportExtensionsフラグの追加されています。 また、--target es2024のサポート、Node.js 2
“The unlicensed use of creative works for training generative AI is a major, unjust threat to the livelihoods of the people behind those works, and must not be permitted.” Signatories (32,204)Björn Ulvaeus, Songwriter Sir John Rutter, Composer and Conductor Sir Kazuo Ishiguro, Novelist Julianne Moore Thom Yorke, Musician James Patterson, Author Kevin Bacon Sir Ian Rankin, Novelist Kate McKinnon Ro
Github Actions上で動くPlaywrightを少しでも早くするために、ブラウザを毎回インストールする方法からDocker imageを使う方法に変更しました。 imageのバージョンはpackage.jsonに記載しているバージョンと同じものにします。 (色々あってライブラリのインストールとテスト実行は別々のジョブにしている) jobs: setup: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Cache node modules uses: actions/cache@v4 id: cache-node-modules with: path: node_modules key: node_modules-${{ hashFiles('yarn.l
こんにちは！ROUTE06 でソフトウェアエンジニアをしている @sasamukuです。 Kaigi on Rails 2024 に参加してきましたのでレポートをお届けします！ 前回に引き続き、ROUTE06 は Silver Sponsors として協賛させていただきました。 弊社からは4人のメンバーが現地参加しました！ ROUTE06は4名でおじゃましてます🙌 #kaigionrails @hoppiestar @sasamuku @MH4GF @ynndino88 pic.twitter.com/n7BRei0djt— ヤノ | ROUTE06 (@ynndino88) 2024年10月25日 参加レポート セッションレポート Keynote: Rails Way, or the highway Capybara+生成AIでどこまで本当に自然言語のテストを書けるか？ モノリスでも使
Release 20.0.0 · nrwl/nx
20.0.0 (2024-10-07) 🚀 Features add rspack plugin (#143) add rspack plugin (#143) upgrade rspack to 0.4.4 (#352) core: allow prompts from init generators during nx init (#28003) core: update github action pnpm version (#27815) core: remove node task hasher (#28147) core: allow circular project dependencies to execute tasks (#28227) core: deprecate custom task runners (#28253) core: open sqlite dat
Ruby on (Guard)Rails
I’ve worked on a few Ruby apps in my career at varying scales: Homebrew (2009-present): created 2009, I started working on it ~5 months in and was maintainer #3. AllTrails (2012-2013): created 2010, I was employee ~#8 and worked on their (smallish) Ruby on Rails application for ~1.5 years. GitHub (2013-2023): created 2007, I was employee ~#232 and worked on their (huge) Ruby on Rails application f
Quincy Jones, producer and entertainment powerhouse, dies aged 91
“Tonight, with full but broken hearts, we must share the news of our father and brother Quincy Jones’ passing,” the family said in a statement. “And although this is an incredible loss for our family, we celebrate the great life that he lived and know there will never be another like him.” Jones was arguably the most versatile pop cultural figure of the 20th century, perhaps best known for produci
MIERUNEのQGIS LABを支える技術
MIERUNEは2024年10月に、QGIS情報サイト「QGIS LAB」をオープンしました。 本記事はこのWebサイトの実装やインフラなどを紹介します。 SvelteKit MIERUNEはSvelteKitを社内標準として採用しています 本WebサイトはSvelteKitによるサーバーサイドレンダリング（SSR）で配信されています。リクエスト時にCMSから記事データを取得し、レンダリングされたHTMLを返します。 ビルドのコスト・拡張性の観点から、SSGは採用しませんでした。 SvelteKitのStreamingを最大限利用し、TTFBの短縮を図っています。SvelteKitのStreamingは簡潔に書けて大変よいです。 https://svelte.dev/docs/kit/load#Streaming-with-promises SvelteKitはNode.jsのコンテナイメ
Video scraping: extracting JSON data from a 35 second screen capture for less than 1/10th of a cent
Video scraping: extracting JSON data from a 35 second screen capture for less than 1/10th of a cent 17th October 2024 The other day I found myself needing to add up some numeric values that were scattered across twelve different emails. I didn’t particularly feel like copying and pasting all of the numbers out one at a time, so I decided to try something different: could I record a screen capture
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
こんにちは、最近Playwrightを使ってE2Eテストの自動化をやっている者です。 近年、Playwrightの注目度は右肩上がりで伸びていて、Seleniumの人気に追いつかんばかりですね。 画像：GoogleTrendsより 今回は、壊れにくいE2Eテストのコードを書くために気をつけたことを紹介していきます。 また取り扱う内容はテストの実行時間を短くする上でも重要ですので、ぜひ取り入れてみてください。 タグの指定にデベロッパモードで取得したXPathを使わない 例えばこんなHTMLがあるとします。名前のinputタグをセレクトしたい時、あなたならどうしますか？ <html> <body> <form> <div> <label for="username">名前</label> <input type="text"> </div> <div> <label for="memberId
getByRole()でボタンがヒットしないです、という相談を受けて調べた内容のメモです。次のようなHTMLになっていました。 <label for="my-button">ラベル</label> <button id="my-button"> ボタンキャプション </button> ボタンに対して、ラベルがついていない場合は、<button>タグの中のキャプション（ここでは「ボタンキャプション」という文字列）を指定して、getByRole('button', {name: 'ボタンキャプション'})でヒットするのですが、上記のようなラベルがついていると、そちらのキャプションにはヒットしなくなって、ラベルの方にのみヒットするようになります。 test('has title', async ({ page }) => { await page.goto('http://localhost:5
初めまして、2023年7月にARUTEGA.Incに入社いたしました はる と申します。 自己紹介を兼ねて、1ヶ月半ほど就職活動を行った記録をブログに残してみることにしました。 私の就職活動はきっと世間一般的にはとても異色なものでしたが、これから就職や転職を考えている方の一つの参考になればとても嬉しいです。 Profile 5歳3歳の母、32歳です。 前職では新千歳空港でグランドスタッフとして働いていました。 次女が0歳の時から「育児しつつ、朝と夜になんとか時間をつくって5分でも多く勉強とお仕事をする! 」という3年間を積み重ねてきました。 — 2020年5月もりけん塾に入塾。 フロントエンドエンジニアのもりけんさんからJavaScriptのレビューをいただいたり、モダンな技術を教わっています。無料の塾なのですが、ストイックな塾生さんたちに着いて行きたくて今も必死な毎日です。 2021年か
ここで知った。 GitHubレポジトリ gptme 📜 ターミナル内でLLMアシスタントとチャット形式のインターフェースで直接やりとりできる。ツールにより、アシスタントはシェルコマンドの実行、コードの実行、ファイルの読み書きなどを行うことができ、あらゆる種類の開発やターミナルベースの作業をアシストできる。 ソフトウェアの不足、インターネットアクセス、タイムアウト、プライバシーの懸念(ローカルモデルを使用する場合)に制約されない、ChatGPTの「コードインタープリター」のローカル代替手段。 🌟 機能 💻 コードの実行 シェルとPythonツールを使用して、ローカル環境でコードを実行する。 🧩 ファイルの読み取り、書き込み、変更 パッチツールを使用して、インクリメンタルな変更を行う。 🌐 Webの検索と閲覧 ブラウザツールを使用して、Playwright経由でブラウザを使用できる。
[Playwright]VScodeの拡張機能でらくらくブラウザ操作
はじめに こんにちは。スペースマーケットで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)
Rails+docker-compose.ymlで開発環境を作成しようとしたらnode_modulesが行方不明になった件 - Qiita
.dockerignoreで指定していれば除外されると勘違いしていた。 顛末 1. 要件 新しく作成するプロダクトの開発環境の要件は以下。 Railsのプロダクト Playwrightを利用(特定のサイトをスクレイピングするため) docker composeコマンドで起動 ホストにはnode_modulesの内容を反映したくない 2. node_module、消える Playwrightのダウンロードを含んだイメージのビルドは時間がかかるのと、今回のテーマの本質とはズレるため以下の簡易なDockerfile、docker-compose.ymlを作成しました。 また、.dockerignoreやdatabase.ymlはとりあえず動作する状態に仮で設定しています。 ARG RUBY_VERSION=3.3.5 FROM docker.io/library/ruby:$RUBY_VERSI
はい、今日はですね、大規模なインターネットデータのスクレイピングのベストプラクティスについてお話させていただきます。人間みたいにブラウザを操作できる自律型のウェブスクレイパーを作って、Upworkのタスクを自動的にこなす方法なんかも紹介させていただきますわ。 ウェブスクレイピングの業界いうのは、特に2024年になってAIの影響をモロに受けとるんですわ。これまでは、アグリゲーターやEコマースなんかのネットビジネスは、競争力のある価格やオファーを維持するために、インターネットからデータをスクレイピングするだけでも、えらい数のエンジニアリソースを使うてきたんです。 普通やったら、ウェブブラウザをまねて、URLにHTTPリクエストを送って、HTMLを取得して、それから特定のDOM要素から欲しい情報を取り出すためのパース関数を書くんですけど、これがウェブサイトごとに構造が違うもんですから、サイトごと
Entropixとsmollm - Google Colabで小さな推論マシンをスケールアップする｜AIに仕事を奪われたい
みなさん、こんにちは。今回の動画では、Entropixという新しいプロジェクトについて説明させていただきます。 このプロジェクトは、smollmという非常に優れた小規模言語モデルをベースにしてます。 smollmは、5億パラメータ未満のモデルの中でも最高のもんやと思います。 すでにsmollmについては、さまざまなバリエーションや角度から詳しく取り上げてきましたんで、チャンネルを検索していただければ、たくさんの動画が見つかると思います。 今回の動画では、まずEntropixがどんなもんかを見ていきます。 その後、Google ColabのT4 GPUを使って無料版で実際にsmollmモデルと組み合わせて、どう動くかを確認していきます。 まず、Entropixがどういうもんか、できるだけ簡単に説明させていただきます。 Entropixは、エントロピーという概念を使って、テキストなどのコンテン
はじめに Storybookを用いたビジュアルリグレッションテスト（VRT）はChromaticやStorycap + reg-suitなどを用いることが多いかと思います。 しかし、ChromaticはGitHub Enterprise Serverを利用している場合は、Enterpriseプランの契約が必要となり、reg-suitは外部のクラウドストレージが必要です。 上記の制約がある中、ゆるくVRTを検証してみたかったので、リポジトリにベースイメージを保存してVRTを実行できるLost Pixelを使用してみました。 Lost Pixelとは Lost PixelはOSSのビジュアルリグレッションテストツールで、Storybook、Ladle、Historie、ページスクリーンショット、Playwrightなどを用いたカスタムスクリーンショットをサポートしています。 OSS版の他に有料
B5・68ページ E2Eテスト・スクレイピングツールのPlaywrightの解説本第1弾は、Playwrightをはじめてさわる方がロケーターというブラウザを自由自在に操るAPIを駆使し、簡単なE2Eテストが書けるようになるまでの基本的な使い方の解説をする入門書です。 Playwrightを使ううえで最重要である、ロケーターを中心に解説をしています。 ロケーターが理解できるようになると、ウェブサイトの操作を自在に行えるようになります。 また操作後の要素を検証するマッチャーも解説しており、PlaywrightでE2Eテストがひととおり書けるようになります。 目次 第1章 ウェブブラウザを自動操作する技術 - なぜウェブブラウザを自動操作するのか - ウェブブラウザの種類 - ウェブブラウザを操作するツール - ウェブサイトから見たフルブラウザとヘッドレスブラウザの違い 第2章 Playwri
電通総研のエンジニアが語る「アーキテクト」とは？アーキテクトの仕事、考え方、要素技術の取り組み方を紹介 - TECH PLAY Magazine
主力事業であるシステムインテグレーションに加え、コンサルティング、シンクタンク機能とのシナジーにより、企業や社会の課題提言からテクノロジーによる解決を目指す電通総研。若手アーキテクトが登壇し、アーキテクトの仕事内容などを紹介。後半は2人のゲストを含めた4人のアーキテクトが登壇、電通総研におけるアーキテクト像を明らかにすべく、ディスカッションが行われた。 PM兼アーキテクトのすゝめ 最初に登壇したのは、製造ソリューション事業部の五十嵐光来氏だ。五十嵐氏は2018年に電通総研に入社。入社後は自然言語処理やLightGBM、MLOpsなどを勉強してキャリアを積み、その後AIの製品開発に従事している。 株式会社電通総研 製造ソリューション事業部 兼 Xイノベーション本部 AIトランスフォーメーションセンター シニアエンジニア 五十嵐 光来氏 開発2期目はプロダクトオーナーも務めたという五十嵐氏。製
1. はじめに Playwright編で調べていた時に、Vitestでも同じようにUIでテスト周りを確認できる機能があったため、 追調査として今回はVitest UIを調べてみました。 前回、Playwrightで調べた背景をおさらい 近年、フロントエンド開発においてコンポーネントテストの重要性が高まっています。 私が携わっているプロダクトでも以前より、フロントエンドの単体テストおよび統合テストを導入しており、私も作成したフロントのコードに対してテストを実装していました。 しかし、コンポーネントテストや単体テストを書いていく中で、いくつかの個人的な課題に直面しました。 特に大きな問題となったのは、テストの動作を視覚的に確認できないことによる不安です。 具体的にはプロダクトでテストを記述している中で問題がありました。 テストコードで対象の要素が取得できず、テストを実行できない場合がある 要素
2024年にCAPTCHAを回避する方法
English中文Tiếng ViệtTürkçeРусскийPortuguêsPolskiNederlands日本語Italianoहिन्दीFrançaisEspañolDeutsch 何を学ぶのですか?# さまざまな方法を使用して、Nodejs で Puppeteer を使用して CAPTCHA をバイパスする方法を学習します。 CAPTCHA ソルバー プラグインを使用して人間の往来をシミュレートする Puppeteer は CAPTCHA を回避できますか?# 答えはイエスです。CAPTCHAを回避するには、CAPTCHAソルバーを使用する（高速で安価）か、CAPTCHAを防ぐ高度な技術を実装するかの2つの主な方法があります。 方法1: PuppeteerとNextCaptchaでCAPTCHAをバイパスする# 公式デモを使用して、Puppeteer で CAPTCHA を処
こちらはコドモン Advent Calendar 2022の16日目の記事です🎄 こんにちは！コドモンプロダクト開発部の加藤です。最近初めてカヌレを食べたのですが、すごく美味しくて感動しました。寒くて元気が出ない日も増えてきましたが、おいしいものを楽しみつつ冬を乗り切りたいです🍊 今回はATDD(受け入れテスト駆動開発)でプロダクトを作った体験から学んだことをまとめます。 ATDD(受け入れテスト駆動開発)とは 実際にやったこと 開発内容 チームの規模 手順 実践して感じたメリット 目指すべき挙動を最初に明確にできる デグレを心配せず、内部構造の変更ができる 注意が必要だと感じたこと E2Eの実行時間が長くなりすぎないように工夫する E2Eの安定性を高めるために工夫する E2Eの信頼性を高めるために工夫する おわりに ATDD(受け入れテスト駆動開発)とは ATDDとはどういった開発手
DockerでPlaywrightを実行/確認するコードの配布【仮想ディスプレイもレポートも見れるよ版】 - テスターちゃん【4コマ漫画】
作者です。 dockerでPlaywrightを実行するDockerfileを書いたので配布します。 dockerを起動すればもうPlaywrightのテスト実行可能です。 github.com あと久しぶりにyoutubeでどう使うかも実演付きで説明してみましたので、そちらもよろしければ見てみてください。 youtu.be ネットを見ていたら、dockerでPlaywrightをヘッドレス（実行中の様子が見えない状態）で実行する記事はあるのですが、docker内部で自動テストが実行されている様子が見えるようにするにはどうしたらいいか、が書かれた場所が作者が探す限りでは見つからなかったので、それをできるようにしてみました。 通常dockerでplaywrightを実行するときは「できあがったテスト」を実運用する場合なので動いている様子を見る必要がない、といったところはあるかと思います。 た
Playwrightでブラウザの時刻を操作する
import test, { expect } from "@playwright/test"; import path from "node:path"; import { SinonFakeTimers, SinonStatic } from "sinon"; declare global { interface Window { __clock: SinonFakeTimers; sinon: SinonStatic; } } test.beforeEach(async ({ context }) => { await context.addInitScript({ path: path.join(__dirname, "..", "./node_modules/sinon/pkg/sinon.js"), }); await context.addInitScript(() => {
B5・52ページ E2Eテスト・スクレイピングツールのPlaywrightの解説本第2弾は、Playwrightとユニットテストの棲み分けと、ロケーターを用いてより実践的なテストの書き方を解説する実践書です。 前半はテストの考え方を解説してます。ユニットテストとE2Eテストの比較をしたうえで、効率的なテスト方法を解説します。 後半はテストを書くうえでよくある認証周り、メール、位置情報やカメラといったさまざま状況下での書きかと、設定関係の解説をしています。 Playwrightで簡単な操作をしたことがある方を対象としているため、全く触ったことがない方は前書（https://techbookfest.org/product/xmXkr7z6jUhVEVYALMhdvc）からお読みいただくと理解が深まると思います。 第1章 テストの考えかた - テスト手法 - ユニットテスト（単体テスト） -
Azure Functions (FaaS)で スクレイピングするため、Puppeteer / Praywrightを動かしたい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? やりたいこと 標題の通り、定期的にスクレイピングを行いたいが自身のPCやIaaSだと24時間稼働のコストがかかるため、Functions as a Serviceで動かしたい スクレイピング先のツールがクライアントサイドでJavaScriptを動かす必要があるため、beautifulsoupではなくPlaywright / Puppetterを利用する必要がある 調べたこと Azure FunctionsでPlaywrightを使う or Google Cloud RunでPuppetterを使う、が一番簡単に環境を構築できそう Pla
Playwright UI mode を使いコンポーネントテストのテスト動作を視覚的に確認できるかを試してみた
1. はじめに 近年、フロントエンド開発においてコンポーネントテストの重要性が高まっています。 私が携わっているプロダクトでも以前より、フロントエンドの単体テストおよび統合テストを導入しており、私も作成したフロントのコードに対してテストを実装していました。 しかし、コンポーネントテストや単体テストを書いていく中で、いくつかの個人的な課題に直面しました。 特に大きな問題となったのは、テストの動作を視覚的に確認できないことによる不安です。 具体的にはプロダクトでテストを記述している中で問題がありました。 テストコードで対象の要素が取得できず、テストを実行できない場合がある 要素は取得できているものの、本当に意図通りに動作しているのか自信が持てない 偽陽性などが発生しているのではないかという不安 これらの問題を解決する方法を探る中で見つけたのがPlaywrightでした。 Microsoftが提
Handpick で lintDependencies や testDependencies を管理しよう！ - Neo's World
Handpick で lintDependencies や testDependencies を管理しよう！ React + TypeScript 構成などで巨大な Node.js プロジェクトを構築していると面倒になってくるのが、devDependencies に積まれた開発用 npm パッケージの量。 大量の ESLint Config や Prettier 関連のツールが並び、テストのために Jest や Playwright などがインストールされている。 これらは Lint のため、Unit Test や E2E テストのために必要なツールであり、package.json で管理したいのは山々なのだが、いかんせん物量が多いと npm install に時間がかかるようになる。 また、CI サーバを導入していて、feature ブランチであっても Lint やテストは Git Pu
Cypressは軽量・直感的な上、安定したテスト自動化を実現する工夫が施されたWebアプリ用テストフレームワークです。JavaScriptで構築されておりブラウザ上の動作や変更の検知に強みがある反面、マルチブラウザ非対応などの制約事項も存在します。この記事では、Cypressの特徴における全体像や強み・制約事項、高速化・安定化のためのデザインパターン、選定のための基準を紹介します。 記事のおおまかな構成 Cypressとは何か？特徴・他の技術セットとの違い Cypressを選ぶと何が嬉しいのか？ テスト高速化・安定化のためのデザインパターン: Application Actionsとは？ Cypressを使うべき条件・使わないべき条件は？ 想定する読者 Web開発やE2Eテスト実装の経験があり、基礎は特に求めていない方 UIテスト自動化の選定に悩んでいる方 Cypressを概要レベルで理解
公式ドキュメントは以下 playwright.dev state.json Playwrightにはstate.json（デフォルト名）というファイルを出力したり読み込んだりする機能があって、主な使い道はログイン回数の削減です どういう仕組み？ cookieやローカルストレージの中身をjsonファイルとして出力し、それを再利用することで再ログイン状態を実現してます ログイントークン再利用なんで、ログアウト操作やサーバー側でそれに準じる作業をして無効にされたら、state.jsonは役目を終えます ログイントークンの再利用という挙動なので、一度作った認証を一生使うというよりテストスイートの先頭でログインし、その認証をスイート全体で使うのがよさそう どうやって使うの セーブロード context.storageStateでセーブしてbrowserContextのnewContextで復元する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
JavaScript Best Practices | The WebStorm Blog
QA奮闘記 ~QAエンジニアの役割と品質を支える取り組み~ - enechain Tech Blog
Nx Agentsを導入してフロントエンドのCIを約40%高速化しました - Findy Tech Blog
2024-10-16のJS: Deno v2、TypeScript 5.7 Beta、ES2025に入る5つのProposal
Statement on AI training
PlaywrightのDocker imageとactions/cache - Qiita
Kaigi on Rails 2024 協賛・参加レポート - ROUTE06 Tech Blog
Release v1.48.0 · microsoft/playwright
Playwrightを用いたE2Eテストの自動化スクリプトを書く際に気をつけたこと - Qiita
Playwrightでなぜかボタンにヒットしない | フューチャー技術ブログ
あの手この手で自己実現！わたしの就職活動。 | 株式会社ARUTEGA｜アルテガ
ターミナルでAIエージェントが操作してくれる「gptme」を試す
LLMを使って99%のウェブサイトをスクレイピングする方法｜AIに仕事を奪われたい
StorybookとLost Pixel を用いたビジュアルリグレッションテスト - Qiita
Playwrightのあるきかた ゼロから始めるE2Eテスト：Neln
Vitest UI を使いコンポーネントテストのテスト動作を視覚的に確認できるかを試してみた
ATDD(受け入れテスト駆動開発)でプロダクトを作っての学び - コドモン Product Team Blog
Playwrightのあるきかた E2Eテストの導入からCI構築まで：Neln
中級者のためのCypress入門：E2Eテスト自動化
state.json(Playwright) - jump24dのブログ