並び順

ブックマーク数

期間指定

  • から
  • まで

41 - 80 件 / 99件

新着順 人気順

playwrightの検索結果41 - 80 件 / 99件

  • 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

      Fast and reliable cross-browser testing with Playwright 🎭
    • Playwright で一番小さく始める VRT と、次のステップの選択肢

      2024/02/21 ビジュアルリグレッションテストツール4選!ユーザーが語る各ツールのメリット で発表したスライドです。 https://trident-qa.connpass.com/event/308664/ 参照したURL - https://playwright.dev/docs/test-snapshots - https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions - https://tech.route06.co.jp/entry/2023/03/29/080000

        Playwright で一番小さく始める VRT と、次のステップの選択肢
      • mablからPlaywrightに移行しました - LegalOn Technologies Engineering Blog

        こんにちは! 株式会社LegalOn TechnologiesのLegalForceキャビネ開発部SET(Software Engineer in Test)のひきもち(@rmochioo)です。 昨年8月に入社し、LegalForceキャビネのAPIテスト、自動E2Eテストなどの自動テストの導入、QA業務まで幅広く携わっております。 APIテストに関しては先日、記事出ていますのでご興味があれば見ていただければと思います。 tech.legalforce.co.jp LegalForceキャビネではE2Eテストの自動化ツールとしてmablを利用していましたが、この度Playwrightへの移行を行いました。 現在LegalForceキャビネで運用しているE2Eテストは全てPlaywrightで実行されており、リリース可否判断やQA環境でのマニュアルテストのサポートとして利用されています。

          mablからPlaywrightに移行しました - LegalOn Technologies Engineering Blog
        • ビジュアルリグレッションテストのすすめ

          日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない(と思っていた)ページで表示が崩れてしまったことってありませんか? 私はたびたび経験があります。 毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。 自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。 どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。 ビジュアルリグレッションテストとは ざっくりいうと「見た目の比較」をするテストのことです。 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。 どうやって使うの ビジュアルリグレッションテストを導入するための方法はいく

            ビジュアルリグレッションテストのすすめ
          • Learn Playwright & Puppeteer | Checkly

            Tips, tricks, and in-depth guides from the trenches. Learn how to use the popular open-source browser automation frameworks, Playwright and Puppeteer. This guide provides detailed information and examples how you can write high-quality scripts for testing and synthetic monitoring. Getting Started Have a look at how Playwright & Puppeteer work, what similarities they share, as well as the noticeabl

            • PlaywrightをGitHubActions実行したときの初期処理についての試行錯誤 | フューチャー技術ブログ

              Playwright連載5日目です。 近年PlaywrightやCypressを用いたE2Eテスト(エンドツーエンドテスト)が行われるようになってきました。 E2Eテストとはソフトウェアやシステムの全体的な動作や機能をテストする手法で、ユーザーが実際に行う操作を模倣したテストを行い、アプリケーションが予想通りに機能するかどうかを確認していきます。 具体的な操作手順をテストケースとして作成し、予期される結果との整合性を確認していくわけです。バグの早期発見のためにも、E2Eテストの自動化を行い、さらにはCIに組み込み定期的に実行していきたい。そしていざ組み込んでみると、CIの実行時間が気になってきます。 テスト自体の実行時間も短縮を行っていきたいですが、テストが始まるまでのイニシャライズ、初期処理の時間もそこそこ掛かってしまうもの。 今回はどのように設定していけば処理時間が短くなるか。試行錯誤

                PlaywrightをGitHubActions実行したときの初期処理についての試行錯誤 | フューチャー技術ブログ
              • GitHub - kolodny/safetest

                Safetest is a powerful UI testing library that combines Playwright, Jest/Vitest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices. Safetest provides a seamless testing experience by integrating with yo

                  GitHub - kolodny/safetest
                • Microsoft Releases Playwright Cross-Browser End-to-End Test Runner

                  How to Use Multiple GitHub Accounts Git is a popular tool for version control in software development. It is not uncommon to use multiple Git accounts. Correctly configuring and switching Git accounts is challenging. In this article, we show what Git provides for account configuration, its limitations, and the solution to switch accounts automatically based on a project parent directory location.

                    Microsoft Releases Playwright Cross-Browser End-to-End Test Runner
                  • GitHub - testimio/root-cause: 🔍 [DEPRECATED] Root Cause is a tool for troubleshooting Puppeteer and Playwright tests. 🔎

                    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

                      GitHub - testimio/root-cause: 🔍 [DEPRECATED] Root Cause is a tool for troubleshooting Puppeteer and Playwright tests. 🔎
                    • PlayWright を使ってE2Eテストを書いてみた | Tech Blog | CRESCO Tech Blog

                      こんにちは。クロステック・オフィスの benishouga です。 この記事は「CRESCO Advent Calendar 2020」20日目の記事です。 今回は PlayWright というライブラリについて、調べる機会があったので、PlayWright とは?という説明を少しと、簡単な使い方として「ユーザー操作を記録してのコード生成」「マルチブラウザ向けの E2E テスト」を行ってみたいと思います。

                      • 【Playwright 入門】Playwrightで始めるE2Eテスト - RAKUS Developers Blog | ラクス エンジニアブログ

                        はじめに こんにちは!フロントエンド開発課のkoki_matsuraです。 この記事では、E2Eテストフレームワークとして用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に拡張機能についてもご紹介させていただきます。これからPlaywrightでテストを書きたい人、E2Eテストに少しでも興味を持っていただける方に読んでいただけると幸いです。 目次は次の通りになっています。 はじめに Playwrightとは インストール 簡単なテストを書いてみよう Playwrightの設定を編集しよう 別タブを開くテストを書こう 別タブをコードから開くケース 別タブをリンクから開くケース リクエスト・レスポンスをテストしよう モックを使ってテストしよう Playwright拡張機能を使おう テストの実行 実行ブラウザの変更 ヘッドレスモードの選択 要素の取得 テストコード

                          【Playwright 入門】Playwrightで始めるE2Eテスト - RAKUS Developers Blog | ラクス エンジニアブログ
                        • 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

                            GitHub - checkly/puppeteer-to-playwright: Puppeteer to Playwright conversion script
                          • Announcing Playwright for Python: Reliable end-to-end testing for the web - Python

                            Announcing Playwright for Python: Reliable end-to-end testing for the web Automated end-to-end tests are a powerful tool for your team to ship faster and with more confidence. End-to-end tests automate UI interactions and can validate the functionality of your applications. To this end, we are announcing Playwright for Python in preview today. Playwright enables developers and testers to write rel

                              Announcing Playwright for Python: Reliable end-to-end testing for the web - Python
                            • Vercel + Next.js + PlaywrightでOGP画像を自動生成する

                              Twitter や Facebook など、SNS 上で Web サイトをシェアしたときに表示される OGP 画像。 あらかじめ静的ファイルとしてサーバーに配置されることも多い一方で、画像をサーバー側で動的に生成することができれば、より自由度高く、視覚に訴える OGP 画像で PR することができます。 追記 2022-05-18: 下記の問題は既に解消済みです 🎉 2021-05-25: Vercel 内部で使用されている @vercel/nft の影響で playwright が利用できない状況になっています。playwright-core support を追加した pull request がマージされているので、そのうち解決すると思われます。 https://github.com/vercel/nft/issues/211 https://github.com/vercel/n

                                Vercel + Next.js + PlaywrightでOGP画像を自動生成する
                              • Release v1.22.0 · microsoft/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

                                  Release v1.22.0 · microsoft/playwright
                                • Puppeteer使いがPlaywrightを使ってみて感じた利点

                                  ブラウザの自動操作に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を利用する

                                    Puppeteer使いがPlaywrightを使ってみて感じた利点
                                  • 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

                                      Playwright でコンポーネントテスト
                                    • 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

                                        Playwright を使用してMicrosoft Edgeで自動化とテストを行う - Microsoft Edge Developer documentation
                                      • Playwright 入門

                                        はじめに Node.js 使ってスクレイピングする必要があったので、Playwright を使ってみました。 Playwright 使ってスクレイピングする時、こんな感じで使い始めたらいいんじゃないかなーと思う方法をまとめます。 Playwright Playwright の公式サイトによると、Fast and reliable end-to-end testing for modern web appsらしいです。 いろんなブラウザ、いろんな OS、いろんなプログラミング言語に対応してて、いい感じです。 他のツールないか調査してみたんですが、観測範囲では、今(2022 年)はじめるなら、Playwright 一択な雰囲気でした。 公式ドキュメントが充実してるので、基本的にはそれをみながら試すのが良いのかなと思います。

                                          Playwright 入門
                                        • テスト自動化ツールのPlaywrightでインタラクションスクリプトの記録と再生、テストビデオのキャプチャが可能に

                                          Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

                                            テスト自動化ツールのPlaywrightでインタラクションスクリプトの記録と再生、テストビデオのキャプチャが可能に
                                          • playwright(Node.js) で E2E テスト!

                                            const { chromium, devices } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage({ ...devices['iPhone 11 Pro'] }); await page.goto('https://m.yahoo.co.jp'); await page.screenshot({path: './screenshot.png', fullPage: true}); await browser.close(); })() 各 API について 全て書くと多すぎるので、使えそうなものだけまとめてみます。 playwright playwright.chromium Chromium ブラウザ

                                              playwright(Node.js) で E2E テスト!
                                            • 2021年現在、Puppeteerを使う理由はなくなった。Playwrightを使おう。

                                              (たんなるポエムです) 個人的に、 puppeteer-ruby と playwright-ruby-client という2つのOSSを育てている。 puppeteer-rubyは Google Chromeチームによる元祖Puppeteer をまるっとRubyで再実装したライブラリで、playwright-ruby-clientは PuppeteerからフォークしてMicrosoft(のなかの元Chromeチームメンバー)が育てているPlaywright のクライアントAPIをRubyで実装したライブラリだ。 実装において、puppeteerやplaywrightのソースコードをそれなりに読んでいる。 Playwrightの唯一の欠点(= Puppeteerの存在意義)がなくなった 個人ブログでこの記事を書いたときには、Playwrightは自身が起動したブラウザしか自動操作できないとい

                                                2021年現在、Puppeteerを使う理由はなくなった。Playwrightを使おう。
                                              • PlaywrightでフロントエンドのE2Eテストを自動化してみた話

                                                TL;DR Playwrightは導入コストが高くはない ひとまずスクリーンショットを全ページ撮るだけでも、QAの工数(もしくは自分の確認する時間)を削減できた 意外とやってみると書ける playwright-cliのコード自動生成が非常に便利! きっかけ プロジェクトでPlaywrightのフロントエンドのE2Eテストを書かせていただく機会がありました。 導入〜テストケース作成〜実装までやらせていただいて、知見がある程度溜まったので まとめてみることにしました。 至らぬ点もあるかと思いますが、その際はご指摘いただけますと幸いです。 ざっくりブラウザテストのこれまで 参考:https://blog.logrocket.com/playwright-vs-puppeteer/ Selenium ブラウザテストの自動化自体は新しい技術ではなく、2004年ごろからSeleniumがあった しかし

                                                  PlaywrightでフロントエンドのE2Eテストを自動化してみた話
                                                • PlaywrightによるE2Eテスト自動化を導入したので各種構成とtipsをご紹介

                                                  株式会社シャペロンのsrkwです。 シャペロンでは昨年、Playwrightを使ったE2Eテストによる各種機能の検証の自動化を導入しました。 E2Eテスト導入の背景や、チームへの浸透に向けた取り組みと反省等については別の記事で紹介しているので、興味のある方はこちらも併せてご覧ください。 この記事では、シャペロンの日次のE2Eテスト実行を支えるインフラ構成と、PlaywrightによるE2Eテスト導入によって溜まったtipsをご紹介したいと思います。同じようにPlaywrightを使ったE2Eテスト導入を検討している、あるいは導入済みで格闘している方にとって、少しでもお役に立てると嬉しいです。 日次のE2Eテスト実行を支えるインフラ構成 前提:Shaperonのテナント構成 シャペロンは製薬企業向けのコミュニケーション用SaaS、Shaperonを提供しており、Shaperonは利用テナント

                                                    PlaywrightによるE2Eテスト自動化を導入したので各種構成とtipsをご紹介
                                                  • Vite でマルチページを Playwright でテストする

                                                    モチベーション ドキュメントに載せるサンプルコードを E2E テストできるようにしたい Vite でマルチページ使いたい index.html と main.ts の組み合わせ Playwright で E2E テストを実行したい 戦略 src/index.html でそれぞれのサンプルに飛べるようにしたい env.local で必要な設定を指定できるようにしたい VITE_ を使う src/spam や src/egg とサンプル毎に細かく index.html と main.ts を用意したい vite 時はいいが、vite build 時に困るので対応する必要がある vite.config.js で rollupOptions の input を設定をする必要がある エントリーポイントを src/ 以下にしたい root で設定する .env のパスは root を変更するとそこに影

                                                      Vite でマルチページを Playwright でテストする
                                                    • GitHub - microsoft/playwright-python: Python version of the Playwright testing and automation library.

                                                      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

                                                        GitHub - microsoft/playwright-python: Python version of the Playwright testing and automation library.
                                                      • Web Automation: Don't Use Selenium, Use Playwright

                                                        For web automation/testing, Selenium has been the de facto "standard" since forever. It's simple to get started with and supports almost every programming language. My problem with it has been: It's good enough, but nothing more. It doesn't work that well with modern, Javascript framework heavy sites (Angular, React etc). I'm not saying it doesn't work-- just not too well. Another issue: While Sel

                                                          Web Automation: Don't Use Selenium, Use Playwright
                                                        • Puppeteerの上位互換?自動テストにPlaywrightを使ってみる - Qiita

                                                          はじめに みなさんはE2Eテストを行う時にはライブラリに何を使用していますでしょうか? 僕は普段Google謹製のPuppeteerを利用しているのですが、ちょっと前に話題になってから常に動向を気にしていたPlaywrightが最近バージョン1.0.0のメジャーリリースが行われたということもあって、「これは実際に触ってみたい!」と思い触ってみましたので、備忘録としてここに記そうと思います。 Playwrightとは PlaywrightとはMicrosoftが提供しているChrome、Safari、Firefoxに対して、CLI上でヘッドレスブラウザを操作できるNode.jsのライブラリです。 かなり簡単な記述で対象ページに対してテストを実施することができます。 後述するコードを見てもらえるとすぐわかるかもしれませんがPuppeteerを知っている人はほぼ同じなので読みやすいかもしれません

                                                            Puppeteerの上位互換?自動テストにPlaywrightを使ってみる - Qiita
                                                          • playwright-pythonを使ってE2Eテストを始める - Qiita

                                                            Playwright (TypeScript版)は microsoft/folio ベースのplaywright-testという独自フレームワークを使うが、playwright-pythonにはPyTest用のプラグインがある。 Pytest plugin for Playwright https://github.com/microsoft/playwright-pytest Getting Started! macOSであれば playwright-pythonのインストール

                                                              playwright-pythonを使ってE2Eテストを始める - Qiita
                                                            • 入門者でも安心、Playwrightで驚くほど簡単にブラウザテストを行う | アールエフェクト

                                                              本文書ではブラウザを利用したテスト自動化ツールを利用した経験がない人、これから Playwright を使ってみたいという人を対象に Playwright の基本的な操作方法について説明を行っています。Vue と React のプロジェクトでの Playwright の利用方法についても後半に説明しています。 Playwrightとは Playwright は WEB アプリケーションのテストを自動化するオープンソースのテストツールです。Playwright ではユーザが実際にブラウザを利用して WEB アプリケーションの操作を行う代わりにプログラムを通してブウラザ(Chromium、Firefox、WebKit)を動かすことで WEB アプリケーションのテストを行います。ツールを利用しない場合は機能を追加/更新する度に開発者がブラウザでページを開き動作確認を行う必要があります。Playw

                                                                入門者でも安心、Playwrightで驚くほど簡単にブラウザテストを行う | アールエフェクト
                                                              • Selenium・puppeteer・Playwrightで無限スクロールする - 新しいことにはウェルカム

                                                                ここしばらく、Selenium・puppeteer・Playwrightの使い方をまとめていました。 まとめが長くなってきたので、ある程度の説明や手順が必要な操作は別記事にまとめようと思います。 ここでは、Selenium・puppeteer・Playwrightそれぞれで、無限スクロールする方法をまとめました。 スクロール 無限スクロールの手順に入る前に、まずは基本となるスクロールをする方法です。 JavaScriptのElement.scrollTopを使って、ウィンドウのdomのスクロール位置を移動させる方法もあるのですが、ここではElement.scrollIntoView()を使って、ウィンドウ内の一番下のdomが見えるようにスクロールさせる方法を使います。 参考として最後にElement.scrollTopを使った方法も記載しました。 sample html ウィンドウの中に、

                                                                  Selenium・puppeteer・Playwrightで無限スクロールする - 新しいことにはウェルカム
                                                                • 最新自動テストツール『Playwright for Python』さわってみた - Qiita

                                                                  JavaScript向けのE2E自動テストツールであった「Playwright」が、 Python向けに「Playwright for Python」としてプレビューリリースされたということで早速さわってみました。 Announcing Playwright for Python: Reliable end-to-end testing for the web Playwrightとは PlaywrightはChromium, Firefox, Webkitを単一のAPIで自動化するライブラリです。 これを利用することで高速で信頼性の高いクロスブラウザテストが実施できるようになります。 Playwrightの利点 公式ドキュメントでは以下の4点が述べられています。以下拙訳です。 1. 全てのブラウザをサポート Chromium, Firefox, Webkit(Safari)をサポートして

                                                                    最新自動テストツール『Playwright for Python』さわってみた - Qiita
                                                                  • Migrating from Puppeteer to Playwright | Checkly

                                                                    The switch from Puppeteer to Playwright is easy. But is it worth it? And how exactly does one migrate existing scripts from one tool to another? What are the required code-level changes, and what new features and approaches does the switch enable? UPDATE: you can use our puppeteer-to-playwright conversion script to quickly migrate your Puppeteer codebase to Playwright. Puppeteer and Playwright tod

                                                                      Migrating from Puppeteer to Playwright | Checkly
                                                                    • Components (experimental) | Playwright

                                                                      test('event should work', async ({ mount }) => { let clicked = false; // Mount a component. Returns locator pointing to the component. const component = await mount( <Button title="Submit" onClick={() => { clicked = true }}></Button> ); // As with any Playwright test, assert locator text. await expect(component).toContainText('Submit'); // Perform locator click. This will trigger the event. await

                                                                        Components (experimental) | Playwright
                                                                      • playwright-coreと、PCにインストール済みのChromeやEdgeを使って自動操作する

                                                                        まえおき playwright は、何も考えずに npm install playwright すると、Chromiumブラウザなどがダウンロードされ、自動操作ではそれが使われる。 PuppeteerではexecutablePathを指定することで、自分のChromeを使うことができた。 これをPlaywrightではどうやるの?という話。 executablePathを指定する? Puppeteerと同じく、 playwright.chromium.launch() のパラメータでexecutablePathを指定すればいけます。 ただ、もっと簡単な方法があります。 channelを指定するだけ! 公式ドキュメントにはしれっと書いてあるんですが、 playwright.chromium.launch({channel: 'chrome'}) って書けば、PCにインストールされているChr

                                                                          playwright-coreと、PCにインストール済みのChromeやEdgeを使って自動操作する
                                                                        • AWS Lambda with Container ImageでPlaywrightを動かす | スマートショッピング

                                                                          はじめにエンジニアの@biosugar0です。 皆さんは2020年のre:Inventで発表されたLambdaのコンテナサポートを使っていますか? この機能、個人的にはこれまでのZIPで固めてやる方法があまり好きではなかったのでとても嬉しい発表でした。 さて、今回はLambdaコンテナ内でplaywright-pythonを使う方法を紹介します。(playwright自体の使い方の説明はしません) PlaywrightPlaywrightは、マイクロソフトが開発しているブラウザ操作を自動化するためのライブラリおよびCLIツールです。このようなライブラリはpuppeteerやseleniumも有名ですね。 主にNode.jsライブラリとして開発されていますが、python用のplaywright-pythonもあり、今回はこちらを使います。 Lambda コンテナの準備使用したbaseイメー

                                                                            AWS Lambda with Container ImageでPlaywrightを動かす | スマートショッピング
                                                                          • ブラウザ自動操作のPlaywrightはRubyからでも使える? - YusukeIwakiのブログ

                                                                            Playwrightのリリースノートに、気になる記載がある。 Release v1.4.0 · microsoft/playwright · GitHub 英語が苦手でも読めるよう、みんな大好きdeepl翻訳をかけておこう。 爆速の多言語展開スピードを支える何かがあるらしいことはわかる。 ただ、具体的にどういう仕組みで動いているとか、どうやればクライアントが実装できるよとか、そういう情報はドキュメントには一切書かれていない。 さすがマイクロソフト。 なので、いろいろソースを読んで調べた&実際にRubyからPlaywrightを使うPoCを作ってみた。 PlaywrightはServer/Clientモジュールに分かれている 結論から言うと、 microsoft/playwright (TypeScript版)にはServerモジュールとClientモジュールの両方が含まれている ただ、RE

                                                                              ブラウザ自動操作のPlaywrightはRubyからでも使える? - YusukeIwakiのブログ
                                                                            • 県のGo To Eat サイトが使いづらかったのでPlaywright + AppSheetで自分用アプリを作ってみた話

                                                                              Go To Eat とてもお得な施策で良いのですが「どのお店が使えるんだろう?」ってなりますよね。そんな時に見る県の Go To Eat キャンペーンサイトが、思いのほか使いづらかったので、Playwright + AppSheet で自分用アプリを作ってみた話です。 なぜ作った? 茨城県の Go To Eat キャンペーンサイトはこちらです。 トップページは良い感じです。 が… 店舗一覧ページに遷移するといきなり古き良き業務システムのような感じになります😇 (もうちょっと頑張ってくれ..) このページだと、 スマホ対応してないのでスマホで見辛い マップ上での検索が出来ないので、現在地周辺の店舗を探すのが面倒 ということでノーコードツールの AppSheet で作り直してみました。 作ってみたもの AppSheet で作ってみたものがこちらです。 スマホに対応し、店舗名や要素での検索や

                                                                                県のGo To Eat サイトが使いづらかったのでPlaywright + AppSheetで自分用アプリを作ってみた話
                                                                              • pnpmとniを用いてPlaywrightでE2Eテスト、VRTをする環境を整えよう(GitLabCIもオマケで)

                                                                                はじめに 初心者フロントエンドエンジニアをしているRimlと申します。 お久しぶりです。 ふと弊社の分報SlackチャンネルでPlaywrightの話題が上がり、個人的に触れてたのでその知見や溜め込んでた記事は共有したのですが、どうせなら自分の関わってるプロダクトに導入すればいいじゃん!という流れから勝手ながら改善活動として環境構築の方をしました。 何気なくツイートしたら反応がちょっとあった(?) のもあり備忘録にでもなったらいいなと言うことで今回投稿させていただきました! E2Eテストはローカル環境で行わないためリポジトリを分けて構築します。 注意書き 以下環境にて構築、動作するものを前提にしています。 それぞれ違うものは置き換えて読み進めていただけると幸いです。 環境 MacOS Ventura 13 VSCode Gitlab Runner(Ubuntu 22.04.2 LTS) N

                                                                                  pnpmとniを用いてPlaywrightでE2Eテスト、VRTをする環境を整えよう(GitLabCIもオマケで)
                                                                                • STORESにE2Eテストを導入した話

                                                                                  これ何 これは hey Advent Calendar 14日目の記事です。 hey株式会社で STORES のフロントエンドエンジニアをしているものです。社内ではうめきちやうめくんと呼ばれることが多いです。普段は STORES というネットショップ作成サービスのダッシュボード上に弊社POSレジアプリをサポートする機能を組み込んでいます。今回はそのダッシュボードにE2Eテストを導入した話を紹介していきます。 解決したい問題 フロントチームで、本番環境で発生した障害を減らす、または発生したことにすぐに気づきサービスのダウンタイムを少なくするにはどうするべきかを考える機会がありました。 リリース前に機能を実装したチームで起こりうるテストケースを並べて機能が想定した通りに動作するかを確認するといったQAをしているのですが、どうしても手動で確認漏れが起こったり、軽微な修正を加えた際に、特定のブラウ

                                                                                    STORESにE2Eテストを導入した話