ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
サイボウズフロントエンドエキスパートチームのウェブサイトを作りました | サイボウズ フロントエンドエキスパートチーム
こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。 経緯 フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください) そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って
差分指向テスト（DOT: Difference Oriented Testing）という考え方 - MNTSQ Techブログ
はじめに MNTSQ(モンテスキュー)株式会社 フロントエンド担当の安積です。 入社して4ヶ月とちょっと。 コードに取り組もうと入社して、まさに日々格闘しております。 私の後ろの席にはこんなバズ記事書く人や、こんなイカつい記事書く人が座ってまして、そんなプレッシャー期待の中からお送りいたします。 tech.mntsq.co.jp tech.mntsq.co.jp 昨日はこんな記事も公開されています。 tech.mntsq.co.jp はじめに 現在のステータス またはMNTSQ考古学 リファクタリングやるぜっっ！ 仕様書大事だよね 差分指向テストとは テスト環境の概要 テストデータ ブラウザ操作自動化 スクリーンショット比較 Playwriteの操作 ちょっとコードのサンプル 最後に この記事を書いた人 現在のステータス またはMNTSQ考古学 コードベースから見たMNTSQのフロントエン
GitHub - microsoft/playwright-cli: CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
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
CloudflareのDeveloper Week 2023の気になった発表のまとめ - console.lealog();
今年も祭りの季節がやってきましたね。 Developer Week 2023 | Cloudflare というわけで、今年も個人的に気になったものを。 （発表されるのがだいたいJST深夜かつ最後が金曜日なので、どうやっても公開するの週明けになるんよな・・） Introducing Constellation, bringing AI to the Cloudflare stack https://blog.cloudflare.com/introducing-constellation/ Workersで機械学習のモデルが動かせるようになったとのこと プライベートβ サポートされているランタイムで動作するモデルであれば、自作のものでも、用意されてるものでもOK 現状はONNX形式のみ対応 https://github.com/onnx/models https://github.com/d
Puppeteer, Selenium, Playwright, Cypress - how to choose? - AI-driven E2E automation with code-like flexibility for your most resilient tests
Puppeteer, Selenium, Playwright, Cypress – how to choose? At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability,… At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability, accelerate test creation, and improve root-cause analysis. We evaluate a number of test automation frameworks to understand
DevTools architecture refresh: migrating DevTools to TypeScript | Blog | Chrome for Developers
This post is part of a series of blog posts describing the changes we are making to DevTools' architecture and how it is built. Following up on our migration to JavaScript modules and migration to Web Components, today we are continuing our blog post series on the changes we are making to Devtools' architecture and how it is built. (If you have not seen it already, we posted a video on our work of
In an interview with Evrone, Ryan Dahl speaks about the main challenges in Deno, the future of JavaScript and TypeScript, and tells how he would have changed his approach to Node.js if he could travel back in time. Introduction Ryan Dahl is a software engineer and the original developer of the Node.js, and the Deno JavaScript and TypeScript runtime. We are glad to have had an opportunity to speak
（表内のデータ確認日：2024/03/21） スター数だけで言えば prawn が強いですし、歴史もあります。 しかし、コミットが現在もされているものの、最新バージョンのリリースが2020年12月から3年以上空いてしまったのは気がかりです。 wicked_pdf や pdfkit は1年に1度以上は新バージョンのリリースがおこなわれているので、 この２つのどちらかが良さそうに思いました。 最終的には、README が充実していて使うまでのハードルが低そうな wicked_pdf を選びました。 1-1. WkHtmlToPDF 問題 wicked_pdf や pdfkit には重大な問題があります。 これらの gem は WkHtmlToPDF という HTML を PDF に変換する CLI ツールによって支えられているのですが、 これのメンテナンスが 2022/6/29 のコミットを最
Cypress + TestRail による Frontend E2E テストの効率化について | メルカリエンジニアリング
Merpay Advent Calendar 2020 の 8 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 2020 年後半からフロントエンドチームと QA チーム合同で、リグレッションテストの自動化に取り組んできました。E2E テストフレームワークである Cypress でマニュアルテストを自動化し、加えて TestRail を用いてテストケース管理も仕組み化することでワークフローの整備を進めています。本記事では、それらの取り組みについて紹介します。 ワークフロー改善後の全体像 リグレッションテストとは 実装を変更した結果、アプリケーション全体の振る舞いに予期せぬ影響がないかどうかを確認するテストです。メルペイではリリース前 QA の最終フェーズでリグレッションテストを実施しています。Web アプリケーションを End To End (E2E)
Selenium (Ruby) やCapybaraの弱いところをPuppeteerで救いに行く - YusukeIwakiのブログ
「puppeteer-rubyは、Capybaraと共存して動作精度を向上できるのでは？！」っていうことに先週くらいにふと気づいたので、カッとなって実装してみた。 github.com CapybaraとPuppeteerの共存 そもそもなんで共存させる必要があるのか？ Seleniumだと「○○の要素が現れるまで待つ」「△△の要素が消えるまで待つ」みたいなところで、時々DOMの変化通知を拾いそこねて、失敗してしまうことがある。 PuppeteerはDOMの変化通知には強い。ただ、全部をPuppeteerで書き直す気力は無い...。 みたいな感じで、SeleniumやCapybaraの既存コードをなるべく書き換えないうえでPuppeteerのを動かしたい需要は、割とある気がした。 で、需要はありそうなのに、世の中にあるのは twalpole/apparition rubycdp/cupri
Metabaseのグラフをslackへ通知するbotをServerless Framework + Puppeteerで作ってみた - カミナシ エンジニアブログ
こんにちは。株式会社KAMINASHIでPMをやっている@gtongy1です。 みなさんはMetabaseをご存知ですか？ 見た目の良さによる直感的なダッシュボードの構築、クエリ記述時の補完機能、グラフの種類数の豊富さ、ツール自体は無料で使える等便利なBIダッシュボードツールです。 カミナシでもMetabaseをフルに活用して、日々分析時に利用しています。 そんなMetabaseですが唯一欠点があって、それはslackとの連携が難しい所です。 slackへ通知を行う時にグラフで表現できるのはまだ棒グラフだけとか、マルチバイトの文字列は文字化けしてしまうとか、実運用に回す時にはちょっと辛いなと感じるところがあります。 そこで、今回Metabaseのグラフをslackへ通知するbotをServerless Framework + Puppeteerで作ってみました。 最終的に以下のようにsla
Fast and reliable cross-browser testing with Playwright 🎭
Web developers today are shipping faster. Web apps are becoming increasingly sophisticated and run across all devices — our phones, tablets and desktops — each running a different browser engine. This increase in velocity and targets puts immense pressure on the testing process: automated cross-browser testing has become more important than ever. Automated end-to-end tests can be incredibly powerf
CyberAgentのWeb Speed Hackathon 2022 の仕組みが素晴しいと思ったので(特にGitHub Actionsで自動化されたLeaderboardの部分)、自分の環境で遊ぶための方法を書きます。 Web Speed Hackathonとは たぶんフロントエンド版のISUCONのようなイベントです。 参加者は自分でHeroku等にデプロイしたURLを記載したGitHub Issueを投稿し、BOTが返すGoogle Lighthouseの結果を元に算出されたスコアを競います。 ウェブアプリケーションを遅くするための逆プラクティスがあてられているのはISUCONと同様で。 無料で使えるHerokuにデプロイできるかつ（インフラやバックエンド実装で工夫することも可能ですが）基本的にフロントエンドエンジニアのスキルの範囲内でスコアがアップするような設問になっているのが良い
人間のためのHTML Parseライブラリ『Requests-HTML』で楽しくデータクローリング - フリーランチ食べたい
Pythonを使ったデータクローリング・スクレイピングは、エンジニア・非エンジニアを問わず非常に人気や需要のある分野です。しかし、いざデータクローリングしようとすると、複数ライブラリのAPIや、ライブラリそれぞれの関連性に混乱してしまうことがよくあります。 昨年公開された「Requests-HTML」はそういった問題を解決する「オールインワンでデータクローリングが行える」ライブラリです。ユーザーは「Requests-HTML」のAPIのみを学習するだけで、サイトへのリクエスト、HTMLのパース、要素の取得を行うことができます。またHeadless Chromeを使うこともできます。 このブログでは「Requests-HTML」が生まれた背景と使い方、そして興味深いポイントについて書きます。 なぜ「Requests-HTML」が必要だったか データクローリング・スクレイピングの人気の高まり
こんにちは、CyberAgentで内定者アルバイトをしています @junkisai です。 今回は「こえのブログ」の開発に導入したVisual Regressionテストについてお話させていただきます。 そもそもVisual Regressionテストとは コンポーネントやページのスクリーンショットを以前のバージョンのものと比べて、ピクセルレベルでの差分を検出するテスト手法のことです。導入の目的としては、開発者が意図しない変更がないか/差分が意図したものかをテスト結果から確認するだけにすることで、人によるチェックの負担を軽減するためというのが最も大きいですが、機能や動作を検証するためのテストとしても有効です。 完成品 今回導入したVisual Regressionテストの流れ図は以下のようになります。 GitHubにpushすると、CircleCI上でpuppeteerを起動し、Webアプ
EngineeringProductA framework for building Open Graph imagesWe recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub. You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just s
Puppetaria: accessibility-first Puppeteer scripts | Blog | Chrome for Developers
Puppeteer and its approach to selectors Puppeteer is a browser automation library for Node: it lets you control a browser using a simple and modern JavaScript API. The most prominent browser task is, of course, browsing web pages. Automating this task essentially amounts to automating interactions with the webpage. In Puppeteer, this is achieved by querying for DOM elements using string-based sele
puppeteer初心者がTwitterブックマークをエクスポートするツールを作りながら、使い方をまとめてみた - Qiita
puppeteer初心者がTwitterブックマークをエクスポートするツールを作りながら、使い方をまとめてみたNode.jsTwitterスクレイピング個人開発puppeteer ふと、puppeteerがおもしろそうだなと思い、前から欲しかった TwitterブックマークをJSONファイルにエクスポートするツールを題材に、 いろいろ遊んでみた時に備忘録。 puppeteerはサクッと使えるので、すてき(´ω｀) 作ったもの こんな感じで勝手に操作してエクスポートしてくれます(´ω｀) puppeteerで自動ログインして、ブクマをJOSNでエクスポートできるように(´ω｀) わかりやすいように背景色を変えたりしてる(´ω｀) pic.twitter.com/UJiGAiw5KN — 積読ハウマッチ📚きらぷか (@kira_puka) October 1, 2019 最終的なソースコード
【株式会社ラクス】SaaSプロダクト別の技術スタックを一挙公開！ - RAKUS Developers Blog | ラクス エンジニアブログ
（本記事は2023/10/2時点の情報にアップデートしております） こんにちは、技術広報のyayawowoです。 突然ですが、株式会社ラクスと聞いて何を思い浮かべますでしょうか？ 弊社ラクスでは、様々なプロダクトを展開していますが正直認知度は低いと思っております。 そこで今回、弊社についてもっともっと知っていただくため・・・ ラクスが展開している全10プロダクト 全10プロダクトの技術スタック インフラ/SRE/デザイナーの技術スタック について、ご紹介させていただきます！ SaaS開発に携わる方、弊社に少しでも興味を持っている方の一助となれば幸いです！ ラクスが展開している全10プロダクトとは？ バックオフィス向け フロントオフィス向け 10プロダクトの技術スタック 楽楽販売 楽楽精算 楽楽明細 楽楽電子保存 楽楽勤怠 MailDealer 配配メール Curumeru blastmai
What's New In DevTools (Chrome 95) | Blog | Chrome for Developers
New CSS length authoring tools DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown. Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally
Slack Enterprise Gridで動くSlack App開発の悩みどころ | BLOG - DeNA Engineering
こんにちは、 IT 戦略部システム開発グループの岸です。 DeNA では、Google Workspace (旧 G Suite) で利用できるサービスの 1 つである Google グループを多く活用しています。Google グループはメーリングリスト用途に使われる場合が多いですが、社内では独自に JIRA や Confluence といったツールと連携し、グループのメンバーに適切な権限を自動で付与する仕組みを作成しています。 この機能により、新規メンバーが増えた場合でも 1 つのグループにユーザを追加するだけで、自動で複数のツールへ招待されるように設定できます。また、逆にグループから削除することで権限の剥奪ができるので、適切な権限管理の一端も担っています。 先日この考え方を拡張し、コミュニケーションツールとして利用している Slack Enterprise Grid に、Slack の
Techniques to make a web app load fast, even on a feature phone How we used code splitting, code inlining, and server-side rendering in PROXX. At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability to run as well on a feature phone as on a high
Big changes Chromium 81.0.4044.0 (r737027) Puppeteer can now fetch a Firefox Nightly binary for you via PUPPETEER_PRODUCT=firefox npm install. Also, there’s now an example showing how to launch Firefox with Puppeteer. File uploads are generally more reliable (#5363) and elementHandle.uploadFile(...filePaths) now triggers a change event, matching the old behavior in Puppeteer v1.20.0. (#5389) Node.
JSer.info #520 - CSSの各仕様の現在のステータスを一覧する目的であるCSS Snapshot 2020が公開されています。 CSS WG Blog – CSS Snapshot 2020 Published CSS Snapshot 2020 CSS Snapshot 2020 日本語訳 CSS Snapshot 2020が発行されました | フロントエンドBlog | ミツエーリンクス スナップショットとしてCSSモジュール(ここではCSSの各仕様のこと)のステータスとサマリがまとまとめられています。 CSSの仕様の全体像が分かりやすいので、興味がある人は見てみると良いかもしれません。 また、最新のステータスはCSS current work & how to participateで確認できます。 JavaScript Performance in the Wild
Getting Started with Front End Testing — JavaScript January
This article is brought to you by Amy Kapernick. Amy is a Microsoft MVP, Twilio Champion, speaker, and community organizer. We all know that testing is important, your project can't be run unless all your unit and integration tests are written (and pass), but we often forget about testing the front end. There are so many different tests we need to be running on the front end - accessibility testin
この本の概要 Node.jsの入門書です。Node.jsは今やWebアプリケーション開発には欠かせない存在です。 本書には，Node.jsで実際にアプリケーション開発をはじめるための知識がまとまっています。 基礎知識，環境構築，重要文法，非同期，CLIツール開発，Expressを用いたサーバーサイドの開発やフロントエンド（React）との連携などNode.jsの全体像が学べます。 現場で活躍する第一人者が，Node.jsのアプリケーション開発の指針やノウハウを教えます。 こんな方におすすめ Node.jsを学びたいエンジニア JavaScriptへの基本的な知識のあるエンジニア，サーバサイドもある程度しっかりやりたい人 他言語でサーバサイド開発の経験があり，Node.jsも身につけたいエンジニア この書籍に関連する記事があります！ 人気のNode.jsをはじめよう 本書には、Node.js
Visual Regression Testing はじめました - 具体的な運用 Tips | Recruit Tech Blog
こんにちは。スタディサプリ ENGLISH Web フロントチームの kazuma1989 です。 先日、私たちのチームは開発フローに Visual Regression Testing を導入しました。Visual Regression Testing は、フレームワークを紹介する記事は見つかるものの、具体的な知見があまり広まっていない印象なので、具体的な設定値や選定理由も含め紹介してみます。 React による Web フロント開発を前提にしていますが、Visual Regression Testing のコア部分は「画像の比較」であるため、他のプラットフォーム開発でも参考になればと思います。 Visual Regression Testing (VRT) とは Visual Regression Testing （日本語で 画像回帰テスト、以下 VRT）は、画像の差分を検出する、スナ
JSer.info #488 - TypeScript 3.9がリリースされました。 Announcing TypeScript 3.9 | TypeScript Promise.allの型推論がされています。 また3.9 β時点では導入される予定だったawaitedは問題が見つかったため、3.9時点では導入されないことになりました。 その他にはビルドパフォーマンスの改善、Type Errorとなることを期待する// @ts-expect-errorコメントの追加などが行われています。 JSへとコード変換における非互換な変更として、クラスのGetter/Setterをenumerable: trueに変換するのではなく、enumerable: falseに変換する変更が含まれています。 これは、ECMAScriptの仕様で定義されているのと同じ挙動で、Babelも同様の挙動です。 Type
GitHub - gajananpp/puppeteer-ide-extension: Standalone puppeteer playground in browser's developer tools.
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
Big changes Chromium 79.0.3942.0 (r706915) Puppeteer now requires Node.js v8+; Node.js v6 is no longer supported page.screenshot now clips elements to the viewport (#5080) New APIs: page.emulateTimezone(timezoneId) page.emulateMediaType(type) (superseding the old page.emulateMedia(type) API) page.emulateMediaFeatures(features) API changes New API: page.emulateTimezone(timezoneId) (#4949) New API:
JavaScripr言語にリアクティビティを実現するフロントエンドフレームワークSvelte 3 - 作者のRich Harris氏に聞く
原文(投稿日：2019/05/06)へのリンク Svelteフロントエンドフレームワークは先頃、Svelte 3をリリースした。Svelte 3では、ユーザーインターフェイスの実装に関連して、エンティティをリンクするインバリアントを宣言的に表現する、新たな方法を導入している。これによって開発者は、パフォーマンスを意識して再レンダリングを実施したり、状態依存の部分を意識的に同期するような処理が不要になる可能性がある。新しいロゴとキャッチフレーズ、Webサイトも用意された。Sapper(Svelteを搭載したNext.jsスタイルのアプリケーションフレームワーク)とSvelte Native (モバイルアプリケーション開発をターゲットとする)は、Svelte 3にアップグレードされている。InfoQは今回、Svelteの開発者であるRich Harris氏にインタビューして、Svelte 3の
クイックサマリー：2021年のWebパフォーマンスを高速化しましょう。 毎年恒例のフロントエンドパフォーマンスのチェックリスト（PDF、Apple Pages、MS Wordに対応）は、指標やツールからフロントエンドのテクニックに至るまで、現代のWebで高速なユーザ体験を生み出すために知る必要があるすべてを提供します。 このチェックリストは2016年から更新を続けてきました。 メールのニュースレターでも、フロントエンドに関する便利な情報をご確認いただけます。 このガイドは、LogRocketに勤務する筆者の友人の厚意によるサポートを受けています。 LogRocketは、フロントエンドパフォーマンスのモニタリング、セッションリプレイ、製品分析を組み合わせ、顧客体験の向上に貢献するサービスです。 また、DOM完了時間、サーバ初期応答時間（TTFB）、初回入力までの遅延時間（FID）、クライアン
はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP となった形です。今年は、2019年11月30日、12月1日の二日間で開催されました。リクルートテクノロジーズは、イベントのプラチナスポンサーの１つです。 以下、公式ページからの引用です。 jsconf
第8話 突撃！企業のScrapbox活用事例 pixivさんの巻 - マンガでわかるScrapbox
前回はFiNCヘお邪魔したわかばちゃん。今回は、イラスト・漫画・小説の投稿や閲覧が楽しめるイラストコミュニケーションサービス「pixiv」を運営する株式会社ピクシブ（以下pixiv）へ行ってきました！ leaf.iconチームサイズが大きくなるほど、コミュニケーションパスが増える問題 pixivのメンバー数は、ここ2〜3年で約2倍に増えました。 それに伴って、プロジェクトチームの人数も増えました。 古賀さん.icon たとえば、私が所属するpixiv Sketchのプロジェクトチームでは、リリース当初(2015年6月)はエンジニア4名でした。 今となってはエンジニア・デザイナー・運用など混成型になり、1チームあたりの人数は9名になりました。 わかばちゃん2.icon チームメンバーが増えるっていいことなんじゃないですか？ 古賀さん.icon いえいえ、そのぶん大変なこともあるんですよ。 古
What's New In DevTools (Chrome 90) | Blog | Chrome for Developers
New CSS flexbox debugging tools DevTools now has dedicated CSS flexbox debugging tools! When an HTML element on your page has display: flex or display: inline-flex applied to it, you can see a flex badge next to it in the Elements panel. Click the badge to toggle the display of a flex overlay on the page. In the Styles pane, you can click on the new icon next to the display: flex or display: inlin
Decker
Decker Decker is a multimedia platform for creating and sharing interactive documents, with sound, images, hypertext, and scripted behavior. You can try it in your web browser right now. Decker builds on the legacy of HyperCard and the visual aesthetic of classic MacOS. It retains the simplicity and ease of learning that HyperCard provided, while adding many subtle and overt quality-of-life improv
April 8, 2020 Today, we'll look at measuring React component render performance with the React Profiler API, measuring interactions with React's new experimental Interaction Tracing API and measuring custom metrics using the User Timing API. For demonstration purposes, we'll be using a Movie queueing app. The React Profiler API The React Profiler API measures renders and the cost of rendering to h
2020-05-02 Dynamic Rendering を試してみる - odan-worklog
#dynamic-rendering Dynamic Rendering とは https://developers.google.com/search/docs/guides/dynamic-rendering?hl=ja UserAgent がクローラーな場合に html をレンダリングしてからレスポンスを返すことにより、JS を実行しないクローラーに対して正しいコンテンツを読み込ませる技術 SSR との比較 Dynamic Rendering はヘッドレスブラウザなどを用いてレンダリングすることが多い 最終的には SSR にするのが良いらしい https://www.suzukikenichi.com/blog/dynamic-rendering-is-a-temporary-workaround/ SSR 実装難しくない？ 選択肢 prerender.io https://prer
reg-suit によるビジュアルリグレッションテストで Rails アプリの CSS 改善サイクルが回り始めた話 - Speee DEVELOPER BLOG
こんにちは、デジタルトランスフォーメーション（DX）事業本部のエンジニアの中嶋（@nyamadorim）です。もともと Rails のサーバサイド開発をメインに担当していましたが、今期はフロントエンド開発に取り組んでいます。 この記事では、「おうちの語り部*1」というプロダクトにビジュアルリグレッションテストを導入して、CSS の改善サイクルが回り始めた話を紹介します。 ビジュアルリグレッションテストとは ビジュアルリグレッションテスト導入の動機 テストツールの選定 reg-suit 他のテストツール reg-suit によるテスト環境の構築 reg-suit によるビジュアルリグレッションテストのフロー reg-suit の利用イメージ 差分が見つかれば、Pull Request に通知 どのページ/コンポーネントが変わったかを見る ピクセル単位で差分を確認する 差分がなければ ✨✨ R
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Interview with Ryan Dahl, Node.js & Deno creator by Evrone
Rails で PDF を作ったけど、時代遅れのやり方だったかもしれない
Web Speed Hackathon 2022 を勝手に開催する
WebアプリにVisual Regressionテストを導入 - Qiita
A framework for building Open Graph images
Techniques to make a web app load fast, even on a feature phone
Release v3.0.0 · puppeteer/puppeteer
2020-12-29のJS: CSS Snapshot 2020、100万のサイトをクロールした調査結果、FlowからTypeScriptへの移行
実践Node.js入門 ―基礎・開発・運用
2020-05-18のJS: TypeScript 3.9、Deno 1.0、Playwright 1.0
Release v2.0.0 · puppeteer/puppeteer
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-前編 | POSTD
JSConf JP 2019 参加報告 - とろろこんぶろぐ
Profiling React.js Performance