フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
はじめに こんにちは。スペースマーケットで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)
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
STORESでフルタイムRubyコミッタをやっている遠藤（@mametter）です。 STORESは今回RubyKaigi 2024で、託児所を運営する「ナーサリースポンサー」として参加していました。この様子は後日詳報しますが、それ以外にも参加者に楽しんでもらえる企画をいろいろな形でしていました（予告記事を参照）。 この記事ではその中でも、ブースでやった「Ruby "enbugging" quiz」について、解答や出題意図などを紹介します。 Day 1 終了時のスコアボードです！ 3点の方もたくさんいらっしゃいました！ Day 2のクイズも楽しんでください😊#rubykaigi https://t.co/RJIBEqsFSf pic.twitter.com/ewp22Cs7jr— STORES Tech (@storesinc_tech) 2024年5月16日 概要 動作しているプログラ
はじめに 昨年は英語で書いたんですが、今年は発表できなかったので日本語で書きます。 登壇したかったニャンね いや〜〜〜〜〜〜〜〜〜〜〜〜……はい。 特にしおいさん、いまいずみさんと僕はRubyKaigi Takeout 2021での初登壇以来、RubyKaigi 2023まで連続してacceptされていたので、勝手に同期みたいな仲間意識を感じていたのですが、今年は僕がnot acceptedとなり、ぐぅぅぅ……という感じです1。まあnot acceptedとなることに対しての納得はあるので、精進が必要、といったところですね。 トーク まともに聞けているのがあまりない……以下箇条書きで感想を書いていきます。 The depths of profiling Ruby (osyoyu) 言いつけどおり最前待機した “Software profiling is a never-complete a
はじめに PythonでHTTPリクエストを大量に非同期で投げる方法を探していました。requestモジュールはどうも対応していない様子なので、aiohttpを使うしかないのか…？と諦めていたところ、どうやらHTTPXが良さそうなので、試してみました。 What's HTTPX? HTTPXはDjango REST frameworkや、Starlette、Uvicornと同様に管理しているEncode社が管理しているプロダクトのようです。 HTTPX is a fully featured HTTP client library for Python 3. It includes an integrated command line client, has support for both HTTP/1.1 and HTTP/2, and provides both sync and a
Rust製TypeScript LinterであるBiome, Oxc, deno_lintなどは、TypeScriptの型情報を利用するLintルール（型情報Lintルール）[1]を持っていません。本記事では、その背景から、Rust製TypeScript Linterが型情報Lintルールを実現するための手段についてまとめます。 筆者のTSKaigi 2024で利用した下記登壇資料に情報を追加し、文章化したものです。 要約すると、以下になります。 Rust製TypeScript Linterは、安全性をさらに高めてくれるtypescript-eslintの型情報Lintルールが欲しいが、パフォーマンスを犠牲にしたくない。TypeScript Compilerに頼らずに実現するには、Alternative TypeScript Compilerや型推論が必要。型情報Lintルールの実装を型
Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new features and improvements. This time we focused on polishing the work we shipped by graduating many of the new APIs to stable, addressing common developer requests, and experimentally releasing one of the most desired roadmap projects: zoneless change detection.
Stable Diffusion は、GPU を利用した画像生成 AI の中でも最も有名なプロダクトだと思います。Stable Diffusion の利用者は一般的にまず GPU を準備し、そこで環境を構築してから画像生成を行うのですが、今回は Stability AI（Stable Diffusion の開発元）の用意している API を利用して、塗り絵の自動生成を作ってみました。 塗り絵 自動生成: https://color-painting.vercel.app/ 子どもたちのために、塗り絵を自動生成するサービスです。この記事では、どのようにこのアプリを作ったのか簡単に紹介しております。コードは全て JavaScript です。 ソースコードも github で公開しています。Stability AI Developer Platform, Vercel, Google reCAP
S3上のオブジェクトを結合するnpmパッケージを公開した話(ESM, CJS対応) | DevelopersIO
はじめに S3上の細かいオブジェクト(ファイル)を1つのオブジェクトに連結したい要件がありましたが、色々調べると気にかける事が多く、挙動を理解する目的込みでnpmパッケージを作ることにしました。Pythonのs3-concatにInspireされ、Node.js(TS)で同じことを実現したいと思ったのもモチベーションの1つです。 ESModulesとCommonJSに対応しています。 S3にはMultipart upload機能があります。5GBを超えるファイルはCopyObjectで移動が出来ないため、Multipart uploadを使うケースが多いです。boto3のcopyメソッドは、Multipart upload機能を使っているようです。このMultipart upload機能は、ファイルの結合にも利用可能です。 この背景をベースに以下の理由から、npmパッケージ化することにしま
1.125 (v9.31.0)
3^2 / 2^3の答えである1.125を基本の比にし、様々な大きさをすべて計算しなおす。「黄金比なんて誰も設計に使っていない」というような本を読み、黄金比を使っているのがちょっと恥ずかしくなったからだ。4乗していくとなんとなく大きくなっていくようで、キリの良い数字が増え、自己満足度が上がる。結局は黄金比に近い(1.125^4 = 1.602)ので、最終的な結果は変わらない。 巨大なハイパーリンク まず、かつてTwitterとして知られていたプラットフォームへ投稿する時に使う、短めの概要を別に作るようにする。それに使うだけではもったいないので、ホームの投稿一覧をリストからセクションに変えて、そこでも使うようにする。その流れでsection要素全体をハイパーリンクにするようにし、その結果CSSが複雑になる。ここで言う「複雑」とは、やりたいことと実装に大きな乖離があり、レンダリング結果とコード
EJable.com on LinkedIn: Akiya in Japan: How to Buy Cheap Abandoned Houses
Ever dreamt of owning a piece of Japan's rich history? Dive into the world of Akiya, where abandoned homes await their next chapter. From rustic countryside retreats to urban houses, Akiya offers a unique opportunity to buy an affordable house in Japan. Read on to explore the charm, challenges, and possibilities of having a dream home in Japan for holidays and for making a side business: https://l
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Playwright]VScodeの拡張機能でらくらくブラウザ操作
Server Actions の同時実行制御と画面の状態更新
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
Ruby "enbugging" quiz の解説 - STORES Product Blog
RubyKaigi 2024 参加記 | うなすけとあれこれ
Pythonで使える！非同期対応のRequestsモジュールとしてのHTTPX
Rust製TypeScript Linterにおける型情報Lintルールの模索
Angular v18 is now available!
Stable Diffusion API を使って塗り絵 自動生成アプリを作る