Chrome's Headless mode gets an upgrade: introducing --headless=new | Chromium | Chrome for Developers
Chrome's Headless mode just got a whole lot better! This article presents an overview of recent engineering efforts to make Headless more useful for developers by bringing Headless closer to Chrome's regular "headful" mode. Background Back in 2017, Chrome 59 introduced the so-called Headless mode, which lets you run the browser in an unattended environment without any visible UI. Essentially, runn
2022 / 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2021年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2021年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.js、2020年の総合ランキングはDenoです。 以下は2021年のランキング、2021 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2021 6回目のJa
GitHub - m1k1o/neko: A self hosted virtual browser that runs in docker and uses WebRTC.
Welcome to Neko, a self-hosted virtual browser that runs in Docker and uses WebRTC technology. Neko is a powerful tool that allows you to run a fully-functional browser in a virtual environment, giving you the ability to access the internet securely and privately from anywhere. With Neko, you can browse the web, run applications, and perform other tasks just as you would on a regular browser, all
puppeteerでbootstrap導入時の影響調査をやってみた！ - Hajimari Tech Blog| 株式会社Hajimari
こんにちは！ 6月から23卒内定者インターン生として株式会社Hajimariに入社した、江端 凌です。 普段は、TUKURÜS事業部で受託開発の業務に携わっています。 今回は受託開発している既存サイトに、bootstrapを導入することになったので、どのような影響が出るのかを調査することになりました。 背景としては、既存サイトのCSSの複雑化と適切なブレークポイントの設置が出来ていなかったことから導入に至りました。 そこでbootstrapの導入前と導入後を比較するために、node.js製のライブラリであるpuppeteerを利用して全ページのスクリーンショットと差分画像を生成しました！ 今回はpuppeteerの概要から、実装までの流れを紹介させていただきたいと思います！ puppeteerとは？ puppeteerとは、自動でブラウザ操作を行えるnode.jsのライブラリです。 npm
Detect inactive users with the Idle Detection API | Capabilities | Chrome for Developers
How to use the Idle Detection API Feature detection To check if the Idle Detection API is supported, use: if ('IdleDetector' in window) { // Idle Detector API supported } Idle Detection API concepts The Idle Detection API assumes that there is some level of engagement between the user, the user agent (that is, the browser), and the operating system of the device in use. This is represented in two
週刊Railsウォッチ（20190805-1/2前編）Rails 6のActive Recordは速くなった、Windows WSL2+VSCodeでのRails開発、Martin Fowler記事ほか｜TechRacho by BPS株式会社
2019.08.05 週刊Railsウォッチ（20190805-1/2前編）Rails 6のActive Recordは速くなった、Windows WSL2+VSCodeでのRails開発、Martin Fowler記事ほか こんにちは、hachi8833です。7payが9月に静かに息を引き取ることが先週決まったそうです。 いや、「7Payって、結局何が悪かったんだ？」って真っ当な疑問でしょ。僕も知りたいですよ。外部が（僕も含めて）色々言っているけど、いずれも推測、もっと言えば憶測にすぎません。 https://t.co/LEKEGzAQEc — 徳丸 浩 (@ockeghem) August 4, 2019 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたと
【Playwright 入門】Playwrightで始めるE2Eテスト - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、E2Eテストフレームワークとして用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に拡張機能についてもご紹介させていただきます。これからPlaywrightでテストを書きたい人、E2Eテストに少しでも興味を持っていただける方に読んでいただけると幸いです。 目次は次の通りになっています。 はじめに Playwrightとは インストール 簡単なテストを書いてみよう Playwrightの設定を編集しよう 別タブを開くテストを書こう 別タブをコードから開くケース 別タブをリンクから開くケース リクエスト・レスポンスをテストしよう モックを使ってテストしよう Playwright拡張機能を使おう テストの実行 実行ブラウザの変更 ヘッドレスモードの選択 要素の取得 テストコード
週刊Railsウォッチ（20190924-1/2前編）Railsのconcernsを考える、Netflixのヘキサゴナルアーキテクチャ、Railsのアロケーション削減ほか｜TechRacho by BPS株式会社
2019.09.24 週刊Railsウォッチ（20190924-1/2前編）Railsのconcernsを考える、Netflixのヘキサゴナルアーキテクチャ、Railsのアロケーション削減ほか こんにちは、hachi8833です。RailsチュートリアルのRails 6対応翻訳をひとまず終えました🍵。お目見えはもう少し先になると思います。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催しています: お気軽にご応募ください ⚓週刊Railsウォッチ「公開つっつき会」第15回のお知らせ（無料） お申込み: 週刊Railsウォッチ公開つっつき会 第15回｜IT勉強会ならTECH PLAY［テック
Ensure your website is available and usable for everyone during COVID-19 Stay organized with collections Save and categorize content based on your preferences. How to ensure that the core functionality of your website is always available, accessible, secure, usable, discoverable, and fast. This page provides guidance to help ensure your website is available, accessible, secure, and usable for ever
GitHub - checkly/puppeteer-to-playwright: Puppeteer to Playwright conversion script
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
What's New In DevTools (Chrome 85) | Blog | Chrome for Developers
Style editing for CSS-in-JS frameworks The Styles pane now has better support for editing styles that were created with the CSS Object Model (CSSOM) APIs. Many CSS-in-JS frameworks and libraries use the CSSOM APIs under the hood to construct styles. You can also edit styles added in JavaScript using Constructable Stylesheets now. Constructable Stylesheets are a new way to create and distribute reu
This morning, we released Microsoft Edge Beta version 79, which is the final Beta before the new Microsoft Edge is generally available, also known as the “Release Candidate.” On January 15th, we expect to release the “Stable” channel, at which point Microsoft Edge will be generally available to download on Windows and macOS. The new Microsoft Edge is built on the Chromium engine, providing best in
こんにちは、らくからちゃです。 夫婦のお金の管理をどうするのかは、結構ご家庭によってカラーが出るようです。我が家では毎月決まった日に、私の口座から妻の口座に生活費を振り込み、その金額の中でやりくりしてもらうという方法を採用しています。 www.yutorism.jp 基本的に、 青いカード（Kyash）・・・還元率高め 銀色のカード（楽天銀行）・・・必要に応じてATMでおろせる の優先度で使ってもらい、どうしても足らない時や緊急の際には黒いカード（REXカード）を使ってもらうというルールにしています。 予算が残高の形で見えるので、節約にも良いかなあと思ったのですが、案外残高のチェックが億劫なんですよね。Kyashは使った瞬間に通知が来て、その際に残高も表示されますが、すぐに消えてしまう。Moneyforwardの残高も反映まで時間が掛かるし、自分から見に行かないと気が付きづらい。 なんか良
E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする - kakakakakku blog
2019年10月に正式リリースとなった「E2E テスト自動化プラットフォーム Autify」を試す．今回は Autify の CTO 松浦さん (@dblmkt) に期間限定の検証アカウントを作っていただいた．ありがとうございます！ autify.com 今まで Selenium や Capybara (Poltergeist) を使った E2E (End to End) テストの導入経験はあるし，最近だと Cypress や Puppeteer を使う機会もある．とは言え，技術選択よりも「E2E テストを継続的にメンテナンスすること」に対して課題を感じる．仮説検証を繰り返すためにリリース頻度を上げていくと，あっという間に E2E テストも落ちてしまう．適当に XPath を修正したり，修正を諦めた経験もある． 今回紹介する「Autify」を使うと AI にシナリオのメンテナンスを任せられ
TL; DR (要約) Jestの実行時オプション(CLIオプション)と、テストメソッド(it,test)の書き方で、並行処理と順番(逐次)処理をコントロールする方法について、以下の4パターンを図で説明します。 複数のテストファイルを並行処理し、ファイル内のテストは順番に実行する 複数のテストファイルを順番に処理し、ファイル内のテストも順番に実行する 複数のテストファイルを並行処理し、ファイル内のテストも並行実行する 複数のテストファイルを順番に処理し、ファイル内のテストは並行実行する はじめに Jestでは、パフォーマンスのために複数のテストファイルが並行に処理（テスト）されます。しかし、並行処理が思わぬエラーを生むこともあります。 たとえば、データベースへ接続するテストやpuppeteerを使ったE2Eテストなど副作用を生じさせるテストの場合、テストの書き方や実行タイミングによってはテ
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
技術の発達によりテストのツールチェーンが安定してきている 古川陽介氏（以下、古川）：前までは、HTML出力されて、さらにブラウザがどう解釈したかが出力されるという2段構えになっていました。 そうすると何が問題かというと、ブラウザのバージョンや、読み込まれるタイミングによって、ピクセルのズレみたいなものが若干発生した時に、閾値でなんとかしていたけれど、若干のやりにくさが感じられていたんですよね。 そこに、Reactのツールが増えてきて、さらにスナップショットテスティング。真面目にテストのデータを逐一見ようとするから、難しいんだよ。ある程度ダンプしておいて、その内容が完全に一致していたらいいんじゃないの、もしくは、「ちょっと間違っているぐらいだったらいったん出しておくけど、それをどうするかはそっちで決めて」くらいの柔軟性を持たせたテストができるようになってきたところが、やはり強かったんじゃない
Breaking change: Puppeteer no longer uses Node’s EventEmitter library As part of our work to make Puppeteer agnostic of its environment we are removing the dependency on Node’s EventEmitter in favour of an event emitter that is not tied to Node. Under the hood we use Mitt, but we extend Mitt with additional functionality to match most of the methods that Node’s EventEmitter provides. The following
今年はブラウザの自動操作を行う機会が多く、中でも puppeteer というライブラリを使用することが一番多かったのでまとめてみます。
シリーズ累計 1.4 万部突破の大好評の React 本シリーズ「りあクト！」。今度のテーマは Firebase❗ コミック発売情報アプリを実際に作りながら、Firebase を学んでいきます。Firebase が全くの初心者でも大丈夫。コンソールによるプロジェクトの作成から始まり、初めての人が陥りやすいポイントをフォローしながら、アプリの完成までステップアップしていきます。 ソースコードも章ごとのものが GitHub に全て掲載してあり、自分で動かせるようになっているので安心です。 なお、他にはない本書の技術的な目玉トピックとしては、以下の通りとなっています。 ① Rails の rake db:seed のような Seed データ投入の仕組みを作る ② Cloud Functions × Puppeteer でスクレイピング ③ Firestore 単体での Algolia を使わない
Introducing: Modern Web
We are excited to finally introduce our brand new project: Modern Web. What is Modern Web? A few years ago we started the Open Web Components project. Our goal was to help people develop web components, and we created guides and tools to help people do this. While working on this project, we realized that a lot of the things we were making were not necessarily specific to web components. To mainta
ブラウザの自動操作にPuppeteerを利用しているが、試しにPlaywrightを使ってみたら良いと思う点が多かったのでまとめた。正直な感想を言うと、「ほぼ上位互換では？」と思うくらいには良い点が多かったし、悪い点は見つからなかった。同じ作者の後発なだけはある。 なお、Puppeteer歴1年、Playwright歴1日で書いているので、変な箇所があればご指摘ください。 利用バージョン Puppeteer : 5.5.0 5.4.1 Playwright : 1.8.0 便利だと思った点 とても柔軟なselector Puppeteerはpage.$x()など一部でXPath selector が利用できるものの、page.click()やpage.$eval()など多くの関数ではCSS selectorしか利用できなかった。 しかし、Playwrightでは、selectorを利用する
週刊Railsウォッチ（20190909-1/2前編）Rails 6のキャッシュバージョニング、Rubyのキーワード引数周りが変わる、Faker 2がリリースほか｜TechRacho by BPS株式会社
2019.09.09 週刊Railsウォッチ（20190909-1/2前編）Rails 6のキャッシュバージョニング、Rubyのキーワード引数周りが変わる、Faker 2がリリースほか こんにちは、hachi8833です。消費税アップが迫ってきましたね。 PDF: 消費税の円滑かつ適正な転嫁のために -- www.jftc.go.jp つっつきボイス:「そうそう、消費税アップ来ますね😅」「皆さんの中で消費税対応されてる方は？」「経理部とやりとりしたりしてますね」「もう終わりました？」「まだまだです🤣」「食品みたいに軽減税率対応のものを扱ってると面倒そうですね」「どちらにしろ2%アップはやってくるので、商品マスターデータを更新するかどうかとか考えないといけないかも☺️」 同PDFより 「今回の場合、消費税を『還元する』とか『サービスする』的な触れ込みをしてはいけないという指示とかが上のP
Yashints | If you consider Puppeteer cool, then Playwright is awesomeness 😍
If you consider Puppeteer cool, then Playwright is awesomeness 😍 If you’ve ever used Puppeteer, you’d know it enables you to control a Chrome instance (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser - programmatically, through a decent API. The same team has now build a new product called Playwright which apparently is their new favour
ちょっと面白そうだったので絶対に画像をダウンロード&スクレイピングさせないWebページを本気で作ってみたを突破してみようと思う。 方法 方法としては下記の3つくらいが簡単そうだけど、いちばん簡単な1つ目でやってみます。 HTML,JS,JSONをDLしてHTML書き換え、ダウンローダとして使う Chrome Extensionを書く Puppeteerなどを使う とりあえず、仕組みは書かれているので下記でcanvasのtextを無効化 + DL用のボタンを追加します。 <button id="dl">Download</button> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // ctxのfillTextをなにもしない関数に置き換える ct
reg-suit と storycap で行う Visual Regression Testing の高速化 - wadackel.me
はじめに 過去このブログでは Visual Regression Testing（以降 VRT）に関連した記事をいくつか書いてきました。 Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った - wadackel.me reg-viz のリブランディングをした - wadackel.me reg-cli の Report UI をリニューアルした - wadackel.me Storybook と reg-suit で気軽にはじめる Visual Regression Testing - wadackel.me 関連ツールへのコントリビュートから始まり、現在業務でも活用しています。業務で扱うプロジェクトでは、検証対象となるケースが約 2,500 程度になっていて、実行時間に不満が出るようになりました。 今年の 1 月頃にその不満を解消するため高
週刊Railsウォッチ（20190917-1/2前編）Sidekiq 6.0がリリース、銀座Rails#13と「出張！Railsウォッチ」、るびま0060号、ロックイン回避の落とし穴ほか｜TechRacho by BPS株式会社
2019.09.17 週刊Railsウォッチ（20190917-1/2前編）Sidekiq 6.0がリリース、銀座Rails#13と「出張！Railsウォッチ」、るびま0060号、ロックイン回避の落とし穴ほか こんにちは、hachi8833です。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催しています: お気軽にご応募ください ⚓週刊Railsウォッチ「公開つっつき会」第15回のお知らせ（無料） お申込み: 週刊Railsウォッチ公開つっつき会 第15回｜IT勉強会ならTECH PLAY［テックプレイ］ 第15回目公開つっつき会は、10月5日（木）19:30〜にBPS会議スペースにて開催さ
Playwright でコンポーネントテスト
Playwright は Cypress Puppeteer と並ぶ E2E テストのための Node.js フレームワークです。Chromium, Chrome, Edge, Firefox, Webkit (Safari)と多くのブラウザに対応しているという特徴があります。 そんな Playwright ですが v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまり、もともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。 Playwright のコンポーネントテスティングの特徴と使い方を見ていきましょう。 Playwright でテストを書くメリット 現状フロントエンドにおいて、コンポーネントテスティングを実施する際に使用されるフレームワークとして Te
RemixでmicroCMSを使ったブログサイトを構築してみた〜OG画像の自動生成〜 | DevelopersIO
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 ブログで記事を書くと欲しくなる機能のひとつにOG画像を自動生成する機能があると思います。今回はRemixを使ってOG画像を自動生成する機能を実装してみました。 RemixでmicroCMSを使ったブログサイトを構築してみた RemixでmicroCMSを使ったブログサイトを構築してみた〜プレビュー画面〜 OG画像を自動生成する方法としては、canvasを利用する方法とヘッドレスブラウザ等でスクリーンショット画像を利用する方法がよく取られますが、今回はPuppeteerを利用してスクリーンショットを撮影しその画像をOG画像として利用する方法を選択しました。 なおデプロイ環境はVercelを想定しています。VercelではRemixはAWS Lambdaの上で動作するためローカルサーバーや他の環境とは少し異なる方法が必要となります。V
Playwright を使用してMicrosoft Edgeで自動化とテストを行う - Microsoft Edge Developer documentation
Playwright ライブラリは、1 つの API を介してブラウザー間の自動化を提供します。 Playwright は、Chromium 、Firefox、WebKit を 1 つの API で自動化するためのNode.jsライブラリです。 Playwright は、常緑、対応、信頼性、高速のクロスブラウザー Web オートメーションを可能にするために構築されています。 Microsoft Edge はオープンソースのChromium Web プラットフォーム上に構築されているため、Playwright は Microsoft Edge を自動化することもできます。 Playwright は既定で ヘッドレス ブラウザー を起動します。 ヘッドレス ブラウザーでは UI が表示されないため、代わりにコマンド ラインを使用する必要があります。 また、完全 (ヘッドレスではない) Micr
テストや検証に便利な開発者用の「Chrome for Testing」がリリースされる、Chromeのバージョンを指定して起動可能
ウェブアプリの開発をする時には実際にブラウザで操作してみて期待通りの動作をするかのテストを行うものですが、ブラウザのバージョンアップなど、開発者の変更以外の部分でテスト結果が変わってしまうのは困りものです。そうしたウェブアプリの開発者向けに、特定のバージョンのGoogle Chromeを利用できるようにした「Chrome for Testing」をGoogleがリリースしました。 Chrome for Testing: reliable downloads for browser automation - Chrome Developers https://developer.chrome.com/blog/chrome-for-testing/ 高品質なウェブアプリを開発したいなら、自動テストであれ手動テストであれ、ブラウザでのテストは不可欠ですが、これまで適切なテスト環境を用意すること
Automatically detect memory leaks with Puppeteer - Article by Christoph Guttandin - Media Codings
About half a year ago Bronley Plumb kindly made me aware of a memory leak in one of my open-source packages. To see this memory leak in action it was necessary to open a browser and its dev tools to execute some manual steps. On top of that, the memory had to be inspected manually. It was a complicated procedure. Normally I just add a failing test before I fix a bug. This time it was a bit more tr
Published: 07 August 2019 at 21:00 UTC Updated: 07 September 2022 at 09:06 UTC AbstractHTTP requests are traditionally viewed as isolated, standalone entities. In this paper, I'll explore forgotten techniques for remote, unauthenticated attackers to smash through this isolation and splice their requests into others, through which I was able to play puppeteer with the web infrastructure of numerous
JSer.info #609 - Next.js 12.3がリリースされました。 Blog - Next.js 12.3 | Next.js TypeScriptの自動インストールに対応、.envなどの変更にFast Refreshが対応、next/future/imageコンポーネントの改善が含まれています。 また実験的なオプションとしてunoptimizedの追加され、SWCでコードを圧縮するswcMinifyがStableとなりました。 npm v9.0.0-pre.0リリースされています。 Release v9.0.0-pre.0 · npm/cli Node.js 12のサポート終了されています。 workspacesでsemverのrangeを指定できるように、npm birthdayコマンド、npm binコマンドの削除されています。 また、npm pkgコマンドがあるため、
Storybook is the industry-standard tool for building component-driven user interfaces. It enables you to capture component use cases as stories and render them in a browser. During development, you can quickly cycle through them to verify UI appearance. But there's more to a component than just looks. Teams at Target, Adobe, and Shopify import stories in their tests to verify component behavior. N
週刊Railsウォッチ（20190723-2/2後編）Rails 6 rc2がリリース、「MySQLパフォーマンスチューニングTips」が超便利、Aurora Serverlessほか｜TechRacho by BPS株式会社
2019.07.23 週刊Railsウォッチ（20190723-2/2後編）Rails 6 rc2がリリース、「MySQLパフォーマンスチューニングTips」が超便利、Aurora Serverlessほか こんにちは、hachi8833です。ジェネレーションの近さを実感しました。 なぜゼロワンなのに、左右非対称とか、赤青とかの属性がないのか(年寄りの発言) — Yukihiro Matsumoto (@yukihiro_matz) July 17, 2019 つっつきボイス:「これって何の話だっけ？😅」「あ、私が子どもの頃やってた某特撮番組です👶」「なるほど、令和ライダーの話ね😆」 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です
What's New in DevTools (Chrome 117) | Blog | Chrome for Developers
Network panel improvements Override web content locally even faster The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them. To override web content, open the Network panel, right-click a request, and select Override content. If you have local overrides set up but disabled, DevTools en
週刊Railsウォッチ（20190826）6-0-stableの更新を見てみる、『Morning Cup of Coding』ニュースレター、Rails TutorialがRails 6対応に動き出すほか｜TechRacho by BPS株式会社
2019.08.26 週刊Railsウォッチ（20190826）6-0-stableの更新を見てみる、『Morning Cup of Coding』ニュースレター、Rails TutorialがRails 6対応に動き出すほか こんにちは、hachi8833です。数列の1, 2, 4, 8,...みたいな表記を見ると、1, 2, 4, 8, 1, 2, 4, 8, 1, 2, 4, 8,...みたいな可能性もありそうな気がして不安になります。 つっつきボイス:「ruby-jp Slackのどこかで、Rubyの..だったか...を魔改造するみたいな話をちらっと見かけたんですけど、そっちの数学的表記の方が気になっちゃって😅」「どう解釈するか問題ね☺️」「数学方面だと無限数列の...の略記ってコンベンションが頼りというか割と自明でなかったりした覚えが😆」 各記事冒頭には⚓でパーマリンクを置い
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
2022年7月25日紙版発売 2022年7月22日電子版発売 手島拓也，吉田健人，高林佳稀 著 B5変形判／448ページ 定価3,498円（本体3,180円＋税10%） ISBN 978-4-297-12916-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。 WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。高速さに裏付けされた高いUXと，開発しやすさを両立しているのが特徴です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript ライジングスター 2021 - Qiita
Ensure your website is available and usable for everyone during COVID-19 | Articles | web.dev
Getting your sites ready for the new Microsoft Edge
酔った勢いでMoneyForwardの残高をLine通知する仕組みを作ってみた - ゆとりずむ
Jestテストの並行実行と逐次実行をちゃんと理解する - Qiita
「自分たちが考えたモックやスタブは妄想にすぎない」 テスト駆動開発の第一人者が説く、フロントエンドテストの本質
Release v4.0.0 · puppeteer/puppeteer
puppeteerで始めるブラウザ操作の自動化 | Tech Blog | CRESCO Tech Blog
りあクト！ Firebaseで始めるサーバーレスReact開発 - くるみ割り書房 ft. React - BOOTH
Puppeteer使いがPlaywrightを使ってみて感じた利点
絶対に画像をダウンロード&スクレイピングさせないWebページを突破してみる - Qiita
HTTP Desync Attacks: Request Smuggling Reborn
2022-09-13のJS: Next.js 12.3、npm 9 preリリース、Safari 16
Interaction Testing with Storybook
［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発