WebのクローリングにPuppeteerを使っています。 いつかPuppeteerの使い方をまとめたいなと思っていたのですが、そうこうしている内に月日は流れ、Puppeteerと同様のブラウザ操作ツールとして、Playwrightの名前をよく聞くようになってきました。 ならばいっそのこと、新たにクローラーを書く時はPlaywrightに乗り換えて、その使い方をまとめようかなと思い始めました。 一方、ブラウザ操作ツールとしてSeleniumも有名です。 Microsoft Power AutomateでSeleniumが使えると聞いたので、Seleniumならクローリングだけでなく、日々の業務の自動化にも使えて便利かなとSeleniumにも興味がありました。 SeleniumとPlaywright、どちらにしようかと迷ったのですが、どちらも使ったことがなかったので結局両方を使って確かめること
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
こんにちは。エイチームライフデザイン技術開発室の@aiji42です。 先日、弊社が運営しているイーデスというメディアの関連サービスとして、「イーデス専門家相談Q&A」という新しいサービスをリリースしました。 www.a-tm.co.jp 暮らしとお金に関する悩みや質問をサイトに投稿すると、住宅ローンや資産運用など専門分野ごとに実績があるファイナンシャルプランナー(専門家)や、同じような悩みを持っている一般のユーザーからアドバイスや意見を無料でもらうことができるというサービスです。 今回はその新サービスの開発・運営で採用した技術スタックや、それを採用した理由を紹介します。 技術スタック アーキテクチャの概略図は次の通りです。 アーキテクチャの概略図 まず、フロントエンド及びバックエンドはRemixで構築しており、クライアントへはサーバーサイドレンダリング(SSR)でコンテンツを提供しています
ブラウザだけでなく、非ブラウザなJavaScript（JS）処理系も増えてきたので、「主要ブラウザ、Node.js、Cloudflare Workersでも動くDenoファーストなTypeScript/JavaScriptモジュール開発＆CI/CD」をやってみました。一事例として共有します。 はじめに 最近、TypeScriptで hpke-js というモジュールをつくりました。 HPKE (Hybrid Public Key Encryption) というのは、ざっくり言うと、公開鍵を交換しあって共有鍵をつくり、安全にEnd-to-End暗号化をおこなうための規格です。これを Web Cryptography API 上に実装し、このAPIをサポートする複数のJS処理系（主要なWebブラウザ、Node.js、Deno、Cloudflare Workers）で動作保証する（ちゃんと全環境で
はじめに 2023年にZennチームにJoinしたdyoshikawaです。 このたびZennのE2Eテスト基盤をリプレイスしました。このような下回りの改善はユーザへの価値提供との距離が近い機能開発と比べてどうしても後回しになりがちな中、Publication Proという大きなリリースを迎えて少し開発が落ち着いたタイミングであり、E2Eテストを拡充できる土台を整えることで今後より安心して機能を追加していけるようにするために必要だということで実施しました。 各テストを独立実行可能にすることによる開発体験向上、CI（GitHub Actions）の実行時間短縮、そして将来を見据えてのCypressからPlaywrightへの移行を行いました。 本記事ではリプレイス前に抱えていた課題、それに対して打ち出した解決方針、そして具体的にどんなことをやったのかを紹介します。 抱えていた課題 前提として
Storybook をフル活用してテストを実装した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
サムネイル こんにちは、フロリアでエンジニアとして活動している irico です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 今回は、そのフロリアのチームの 1 つである Reactone チーム が採用した「Storybook をフル活用したテスト手法」についてお話します。 Storybook によるテストアプローチ Storybook の v6.4 から play 関数が導入され、v6.5 から Interaction tests が可能になりました。 これによって Story 上でテストを実行するだけでなく、実行したテストの動作確認がブラウザ上で可能になりました。 今までは Jest や Vitest 上で Testing Library を利用する際、DOM 操作の視覚的な確認が難しく
Announcing SvelteKit 1.0
Announcing SvelteKit 1.0 Web development, streamlined The Svelte team Dec 14 2022 After two years in development, SvelteKit has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes. We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we thi
SREチーム(新卒)の市川恭佑です。今回は、Tonamelという自社サービス(Web)において負荷試験を導入した事例を紹介します。 このエントリは「先送りされがちな負荷試験の導入について心理的なハードルを下げる」ことを目的としています。 そのため、事例紹介と銘打っていますが、列挙される事実の独立性よりも文脈性を優先しています。 表現が少し冗長に感じるかもしれませんが、負荷試験について距離感を感じている方は是非お付き合いください。 負荷試験を導入するに至った経緯 Tonamelは、本格的なリリースから5年以上という、比較的長い運用歴を持つサービスです。 まず、何故このタイミングで負荷試験を導入することになったのかについて、その経緯を説明します。 ポストモーテムによる気づき（文化的な土台） 今年の3月に公開されたエントリにもあるように、カヤックでは着実にポストモーテム文化が浸透しつつあります。
分類については独断です。また、こつこつ「ひとこと説明」を追加していく予定です。 Selenium関連については Awesome Selenium : 素晴しい Selenium ライブラリの数々 - Qiita が参考になります。 FAQ なんで＊＊＊を除いているのか 恣意的に除いていることはないので、編集リクエストかコメントをください GUIテスト自動化ツール モバイル・デスクトップアプリ・ブラウザのうち複数の対象のGUIを操作できるテスト自動化ツール。 有料 インストール型 UFT One QTP(Quick Test Professional)→UFT(Unified Functional Testing)→UFT One Silk Test UFT Oneと同じくMicroFocus製で、UFT Oneのほうがメジャーな印象（筆者主観） Ranorex TestComplete W
こんにちは。サーバーサイドエンジニアの三村（@t_mimura）です。 主に保険薬局と患者さまを繋ぐ「かかりつけ薬局」化支援アプリ kakariのサーバーサイド開発（Ruby on Rails）を担当しています。 今回はRailsシステムのCI時間をコスト追加なしで半減した話をします。 目次 前提 対象プロジェクト CIの状況 改善結果 改善内容 前提知識: CIのキャッシュ機能 webpack buildのキャッシュを活用 RuboCopのキャッシュを活用 ESLintのキャッシュを活用 Jestのキャッシュを活用 RSpec Jobをテスト特性ごとに分割 CircleCIのリソースクラスと並列数の最適化 採用しなかった・見送った改善候補 HAML-Lint, Fasterer, Brakemanのキャッシュを活用 Stylelintのキャッシュを活用 bootsnapを活用 Jestの
サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています！ プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
Next.jsにnext/testmodeという概念が出現しMSW x Playwrightのテストがやりやすくなりそう
2023年8月15日にリリースされた Next.js v13.4.16から next/experimental/playwright next/experimental/playwright/msw が登場してテストがしやすくなりそう。というお話です！ 前提条件 今回お話するのは、Next.js の開発サーバーに対してMSWによりAPI通信をモックしてPlaywrightで行うブラウザテストのことをお話します これまでは？ Page RouterかつCSRに関して言えば、MSWでモックすることは可能でした。exampleとしてすでに公式が提供しているので、これをベースにセットアップすれば可能です 現状の課題 Page Router CSRの場合はブラウザ上のservice worker経由でmswが実行されています。なのでmswのserver.useを使うにはそこそこ工夫が必要です。 有志
こんにちは。WEAR Webフロントエンドチームの冨川 (@ssssota) です。 私たちのチームでは普段WEARのWebフロントエンド全般の開発から運用までを行なっています。また、あと半年ほどで10年になるVBScript+jQuery環境からNext.js/React環境へのリプレイスを進めています。 リプレイスの詳細は弊チームの藤井が書いた記事をご覧ください。 techblog.zozo.com 本記事では、WEARのWebリプレイス環境における自動テストの構成について紹介します。自動テストの構成を悩んでいる方の決断の一助になれば幸いです。 はじめに 前提 構成の決定と判断 QAチームによるE2Eテスト Playwrightによるビジュアルリグレッションテスト Vitestによる小さなテスト その他検討したテスト おわりに はじめに 先に結論を述べますが、WEARのWebフロントエ
自社Webサービス上にボタンを配置して、PDFをダウンロードできるようにしたいという要望がありました。しかも 表などのリッチな表現を活用したい 動的に表示する内容が変化し、内容に応じてページ送りをしたい これらは自社Webサービス上のページとしても表示している（しかも認証が必要なページ） という条件でした。react-pdf や html-pdf を使えばできなくはなさそうですが、できるだけスタイルを楽に・デバッグをかんたんに行ないたかったので、別の方法を考えました。 そう、みんな大好きヘッドレスブラウザを活用した方法です。この手の課題のときにはよく手段として上がりますよね。@media print などを使って印刷用に表示する内容の調整もできるし、サービス上のコンポーネントを使ってスタイルできるので非常にかんたんにPDFのコンテンツのスタイルが行なえます。 ただ、問題は認証です。Webサ
PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ
{ "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/workspace mcr.microsoft.com/playwright:v$(node -e 'console.log(require(\"./package.json\").devDependencies[\"@playwright/test\"])')-jammy", "_test": "playwright test", "_test:ci": "CI=1 playwright test", "_test:u": "playwright test --update-snapshots", "serve": "ts-node -r tsconfig-paths/register server.ts", "test": "pnpm run _docker
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
はじめに この記事はBASEアドベントカレンダーの四日目の記事です。 こんにちは！私は@shiiyannnと申します。現在、メンバーシップ Appの開発に携わっています。メンバーシップ Appはショップオリジナルの「メンバーシップ」（会員制度）を作成することができる機能です。 2023年9月、メンバーシップ Appは大幅な機能アップデートを遂げました。今回のアップデートでは、ショップオーナーが商品購入時に独自のポイントを付与できるようになりました。付与されるポイントの量は、注文金額にショップオーナーが設定したポイント付与率を掛け合わせて計算されます。 この記事では、ポイント付与機能の開発中に直面した、浮動小数点計算の問題とその解決策についてお話しします。この問題を深掘りすることで、料率計算や金額処理に取り組む開発者の皆さんに有益な情報を提供できればと考えています。 リリース直前に発見した浮
こちらは STORES Advent Calendar 2022 8日目の記事です。 みなさんこんにちは、STORES のリテール本部でフロントエンドのエンジニアリングマネージャーをしています、 daitasuと申します。 2022年の年の瀬、 STORES のフロントエンド組織は立ち上がりから約4年の月日を迎えました。 日々のカジュアル面談や採用活動のなかで、「STORES のいまの技術状況ってどんな感じですか？Nuxt化って進み具合どうですか？」といった質問を受けることがよくあります。 STORES のフロントエンドグループについて、対外的に全体像を示すような記事が今までなかったので、本記事では、下記を紹介していこうと思います！ STORES フロントエンドの成り立ち 技術負債の解消・改善にどのように向き合っているか 2022年末現在での主な技術状況 2022年現在のスナップショットを
Next.js 製アプリケーションの CI の実行時間削減や安定性向上のために取り組んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、画面刷新を進めていく中で CI の実行時間が長く不安定になってしまい、開発生産性に大きな影響が出ていました。今回の記事では、CI の課題改善のために取り組んだことを紹介します。 目次 DOGO について CI を改善することになった背景 CI の改善のために取り組んだこと ビルド時に tsc を実行しない .next/cache を除いて、artifacts にアップデートする E2E テストをより多くの shard 数で分割する Playwright のブラウザのインストールをキャッシュする PR ではコード差分に関連するテストのみを実行する Hydration の挙動によってテストが flaky になっていた問題の解消 CI の改善の結果 今回取り組ま
こんにちは、asatoです。 あるスクラムチームの話です。とりとめもなく、そんなチームで起こったことを書き連ねていきます。 Table of Contents 【スタート】エンジニアとQAEの間には壁がありました 【1ヶ月目】DoDを作成しました 【2ヶ月目】スプリント中にテストを完了できる方法を探しました、が見つかりませんでした。 【4ヶ月目】QAEもテスト環境構築ができるようになりました 【5ヶ月目】スプリント内でテストが完了するようになってきたのでDoDを更新しました 【6ヶ月目】QAEみんなでAgile Testing Condencedを読み始めました 【6ヶ月目】Engineerもテストするようになりました 【7ヶ月目】QAEも見積もりに参加するようになりました 【7ヶ月目】QAEもスプリントレビューでインクリメントをお披露目するようになりました 【7ヶ月目】開発者全員で探索的
Playwright for Python: ブラウザ操作を自動化しよう！ - kakakakakku blog
ブラウザ操作を自動化して，E2E (End to End) テストやスクレイピングをするときに使えるライブラリ Playwright を試す．Playwright の特徴としてまず「クロスブラウザ」があり，Chromium / Firefox / WebKit をサポートしている．また「複数言語」という特徴もあり，Node.js / Python / Java / .NET をサポートしている．今回は Playwright for Python を前提にする． playwright.dev Playwright の前に 過去の経験を思い出すと，Capybara + PhantomJS で E2E テストを実装していた（2015-2016年頃でなつかしい！）．また最近だと Puppeteer や Amazon CloudWatch Synthetics を使う機会も増えている．しかし，個人的
【Playwright】v1.4系の新機能まとめ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、フロントエンド開発課所属のkoki_matsuraです！ 本記事では、E2EテストライブラリであるPlaywrightのv1.40 ~ 最新版v1.43で追加された機能の中から僕の独断と偏見でいくつかを紹介したいと思います。 では早速、紹介していきます！ 以下は目次です。 v1.40の新機能 Test Generatorにアサーションコード生成機能 toBeVisibleアサーション toContainTextアサーション toHaveValueアサーション v1.41の新機能 screenshot関数のstyleオプション toHaveScreenshot関数のstylePathオプション v1.42の新機能 addLocatorHandler関数 タグの追加 v1.43の新機能 LocatorとFrameLocatorの相互変換 clearCookiesのフィルター機能 ま
data-testidはいつ使うべきか？そもそも使うべきなのか？ | フューチャー技術ブログ
Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、「他の手法が使えないときの最終手段」としています。 In the spirit of the guiding principles, it is recommended to use this only after the other queries don’t work for your use case. Using data-testid attributes do not resemble how your
Announcing Vite 5
Vite 5.0 is out! November 16, 2023 Vite 4 was released almost a year ago, and it served as a solid base for the ecosystem. npm downloads per week jumped from 2.5 million to 7.5 million, as projects keep building on a shared infrastructure. Frameworks continued to innovate, and on top of Astro, Nuxt, SvelteKit, Solid Start, Qwik City, between others, we saw new frameworks joining and making the ec
エンドツーエンド テストの概要:Playwright。 Playwright は、Microsoft がオープンソースとして開発したエンド ツー エンド テスト用フレームワークで、モダンな Web アプリのテストに使用します。 この 6 部構成のシリーズでは、インストールから、テストの実行、記述、デバッグまで、関連するすべてを取り上げます。 Playwright を使うと、モダンな Web アプリに信頼性の高いエンドツーエンド テストを実行できます エンドツーエンド テストの概要:Playwright。 Playwright は、Microsoft がオープンソースとして開発したエンド ツー エンド テスト用フレームワークで、モダンな Web アプリのテストに使用します。 この 6 部構成のシリーズでは、インストールから、テストの実行、記述、デバッグまで、関連するすべてを取り上げます。 P
E2Eフレームワークとして高い人気を誇ってきたのがCypressです。使いやすいテストランナー、わかりやすいテスト結果、TypeScriptの組み込みサポート、プラグインによる拡張、(Seleniumと比較して)高速な実行などを提供しています。フューチャー社内でも使っているプロジェクトがいくつもあり、過去にCypress連載をブログ上で行い、それがきっかけとなってSoftware Designに連載も行いました。 一方で、現在人気が高まりつつあって、Cypressを追い抜こうとしているのがPlaywrightです。かなりCypressを意識して機能追加を行なってきている印象があります。現時点では特徴的なタイムトラベルデバッガー（過去の履歴すべてを保持しておいて気軽に前後DOMの状態を比較したりできる)、スクリーンショット、どちらもExperimentalなコンポーネントテストなど、できるこ
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
Testing | Next.js
Examples Next.js with Cypress Next.js with Playwright Next.js with Jest and React Testing Library Next.js with Vitest Learn how to set up Next.js with commonly used testing tools: Cypress, Playwright, and Jest with React Testing Library. Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Quickstart You can use create-next-app with the with-cypress example to quickl
ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
第17回Quesにて「Agile Testingを夢見たテスト自動化」というタイトルで登壇、テスト自動化のしくじりについて話しました - BASEプロダクトチームブログ
こんにちは。BASE BANK 株式会社 Dev Division にて、Engineering Manager をしている東口（@hgsgtk）です。 TL;DR 第 17 回 Ques にて「CI のためのテスト自動化」というテーマでの登壇依頼をいただき「Agile Testing を夢見たテスト自動化 〜ATDD への挑戦から始まる 1 年間の試行錯誤〜」というタイトルで発表しました 実際にうまく行かなかったことも含めてテスト自動化のしくじりを話しました Agile Testing・ATDD/BDD/SBE に興味がある方に参考になる資料を公開しました 第17回Quesとは Ques とは Software 品質保証に関わる QA エンジニアの活性化を目的とした QA 専門イベントです。 ques.connpass.com Software品質保証に関わるQAエンジニアの活性化を目的
GitHub - microsoft/playwright-test: Build a cross-browser end-to-end test suite with Playwright.
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
差分指向テスト（DOT: Difference Oriented Testing）という考え方 - MNTSQ Techブログ
はじめに MNTSQ(モンテスキュー)株式会社 フロントエンド担当の安積です。 入社して4ヶ月とちょっと。 コードに取り組もうと入社して、まさに日々格闘しております。 私の後ろの席にはこんなバズ記事書く人や、こんなイカつい記事書く人が座ってまして、そんなプレッシャー期待の中からお送りいたします。 tech.mntsq.co.jp tech.mntsq.co.jp 昨日はこんな記事も公開されています。 tech.mntsq.co.jp はじめに 現在のステータス またはMNTSQ考古学 リファクタリングやるぜっっ！ 仕様書大事だよね 差分指向テストとは テスト環境の概要 テストデータ ブラウザ操作自動化 スクリーンショット比較 Playwriteの操作 ちょっとコードのサンプル 最後に この記事を書いた人 現在のステータス またはMNTSQ考古学 コードベースから見たMNTSQのフロントエン
A simple yet powerful testing framework for Node.js Japa comes with everything you need to test your backend applications. Be it writing JSON API tests using an Open API schema or writing browser tests using Playwright. Unlike other testing frameworks born out of the frontend ecosystem, Japa focuses only on testing backend applications and libraries. Therefore, Japa is simpler, faster, and bloatwa
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
https://www.oreilly.co.jp/books/9784814400669/ ひとえに読者の皆さんが買ってくれたおかげで、Real World HTTPを改訂し、このたび3版を上梓しました。ありがとうございます。2016年ごろから書き始めて、2017年に初版を出版したので、執筆段階からすると8年ほど経過しているのですが、これだけ長くこの本に関わり続けられるというのは、本書を買ってくださるみなさまのおかげです。 今回は、ひさびさに無料のミニ版も更新しました。本日、このブログと同時にリリースしました。よりミニ版が学習コンテンツとして使いやすくなるように、そもそもブラウザってどんな動きをするの？というイントロの章をミニ版とオリジナル版に追加しました。 また、オリジナル版だけになりますが、HTTPが単なるブラウザとの通信を超えてプラットフォーム API化していっている流れに合わせて
ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
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
Serenity/JS | Serenity/JS
Enable collaborative test automation at any scale!Serenity/JS is an innovative test automation framework designed to help you create high-quality, business-focused test scenarios that interact with any interface of your system and produce comprehensive test reports that build trust between delivery teams and the business. Make your tests speak your languageSerenity/JS Screenplay Pattern helps you
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Selenium と Playwright の両方を使ってみた感想 - 新しいことにはウェルカム
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
新規サービスにRemixを採用したぜ✌️ - Ateam Tech Blog
ブラウザ, Node, Cloudflareでも動くDenoモジュール開発
ZennのE2Eテスト基盤をリプレイスしました（開発体験向上、CI時間の短縮、Playwright移行）
運用中のサービスに負荷試験を導入した事例の紹介 - KAYAC engineers' blog
テスト自動化関連ツール・ライブラリまとめ - Qiita
お財布に優しいCI改善小ネタ集 - メドピア開発者ブログ
WEAR Webフロントエンドの自動テスト構成 2023 - ZOZO TECH BLOG
ヘッドレスブラウザを活用して少しリッチなスタイルのPDFを生成する
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
小数点の罠：メンバーシップポイント計算の裏側 - BASEプロダクトチームブログ
STORES フロントエンドの現在地 2022 - STORES Product Blog
エンジニアとQAEの壁が崩れていくのを眺めていた | at-blog
Playwright を使用したエンドツーエンド テストの概要
Playwright連載始まります | フューチャー技術ブログ
Introduction
Real World HTTPの第3版ができあがりました | フューチャー技術ブログ