Hatena Blog Tags
はてなブログ トップ
playwright
このタグでブログを書く

playwright

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
エムスリーテックブログ•21日前

クラウド型電子カルテにVisual Regression Testを導入した話

【デジカルチーム ブログリレー3日目】 こんにちは、エンジニアリンググループ デジカルチームの穴繁です。 今回はクラウド型電子カルテであるエムスリーデジカルのフロントエンド開発にて、Visual Regression Test (VRT) を導入した話をします。

#デジカル#VRT#フロントエンド開発#playwright

関連ブログ

新しいことにはウェルカム•1ヶ月前

Selenium・puppeteer・Playwrightでファイルドロップする

ここしばらく、Selenium・puppeteer・Playwrightの使い方をまとめていました。 まとめが長くなってきたので、ある程度の説明や手順が必要な操作は別記事にまとめようと思います。 ここでは、Selenium・puppeteer・Playwrightそれぞれで、ファイルドロップする方法をまとめました。 はじめに ファイルドロップとは、ローカルファイルをWebページの指定場所にドロップすると、そのファイルがWebにアップロードされるようなページを想定しています。 Google画像検索のファイルアップロードのようなものです。 そういったファイルドロップする関数が、Selenium・p…

#Selenium#クローラー#クローリング#スクレイピング
新しいことにはウェルカム•1ヶ月前

Selenium・puppeteer・Playwrightで無限スクロールする

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

#Selenium#クローラー#クローリング#スクレイピング
新しいことにはウェルカム•1ヶ月前

puppeteerの使い方メモ

以前、SeleniumとPlaywrightの比較のため両方を検証していました。せっかく使い方を覚えたので、また必要になった時にすぐに思い出せるよう下記記事に簡単に使い方をまとめました。 元々クローラーとしてpuppeteerを使っていたので、Selenium・Playwrightをまとめたのなら、puppeteerは外せないでしょということで、ここにpuppeteerの使い方を簡単にまとめてみることにしました。 ただ、SeleniumとPlaywrightを検証した結果、今はPlaywrightをメインで使っています。なので、通常使いの向けの網羅的なまとめではなく、puppeteerのお作法…

#Selenium#クローラー#クローリング#スクレイピング
葛葉アプスとちらし寿司•1ヶ月前

AWS LambdaでPlayWright(chromium)を動かした

起こったこと 特定のサイトのスクショを取りたい。WebAPIで叩いて動くAWS Lambda上でPlayWrightを起動し、スクショを取って返却するようにした。 これを実装するには結構な時間がかかったので共有したくなった。 ただし、実行速度が遅い。 正しくは値を返却するまでの時間がものすごくかかる。およそ15秒待たないと画像が表示されない。LambdaLayerなどを使うと早くなるのだろうか。誰か教えてくれ。 AWS CDKでの書き方 NodejsFunctionを使いたい場合、bundlingプロパティに依存するモジュールを記載すると動くようだ。 import { Duration, Si…

#playwright#TypeScript
新しいことにはウェルカム•1ヶ月前

Playwrightの使い方メモ

最近Playwrightを試していたので、使い方を忘れてもまた思い出せるよう、Playwrightの使い方をメモしておこうと思います。 インストール npm install --save playwright Playwrightをインストールすると、同時にブラウザChromium・Firefox・Webkitもインストールされる デフォルトではPlaywrightから呼び出されるブラウザは、その時にインストールされたブラウザが使われる ブラウザをインストールせずPlaywrightのみをインストールし、ブラウザは別途インストールしたものを使用することも可能 しかし、Playwrightのバー…

#JavaScript#TypeScript#クローラー#クローリング#スクレイピング
hacomono TECH BLOG•1ヶ月前

Nuxt3 モックサーバモードで Playwright を使った Visual Regression Test

どうも、フロントエンドの開発基盤を担当している、みゅーとん(@_mew_ton)です 前回 (Nuxt3 でモックサーバ作ってみる) では Nuxt3 でモックサーバモードの実装について紹介しました。 今回は、これを使って E2E テストを実装する体制を整えたので、紹介します！ ビジュアルリグレッションテストとは？ ざっくりいうと、変更前と後での見た目を画像差分で比較し、変化がないかどうかをテストする方法です。 スナップショットテストなどと表記される場合もありますが、スナップショットテストでは DOM 構造を文字列としてスナップショットするケースが有り、厳密には一致しません。 ページのビジュア…

#hacomono#playwright#Nuxt3#Visual Regression Test#frontend#E2E Test
葛葉アプスとちらし寿司•2ヶ月前

AmplifyのテストフェーズでPlayWrightを実行してFailしたのだが、そのままデプロイされてしまった。

起こったこと AmplifyでPlaywrightを使おうと思った。しかし、Playwrightのテスト結果が落ちてもデプロイを中止してくれなかった。（Failしているのにデプロイしてしまう) おそらくだけど、テストコード内で終了コードを1にしてもデプロイを止めることはできないようだ。なお、テスト内でエラーをThrowしてもダメだった。 そもそも そもそも現時点（2023/01/20）でAmplify上ではPlaywrightを対応していない。動作は保証されていないことに注意してほしい。 github.com これを参考にしてほしい github.com 検証結果が記載された何らかのデータに対…

#AWSAmplify
葛葉アプスとちらし寿司•3ヶ月前

Playwrightで遷移先ページのタイトルを評価しようとしたら成功したり失敗したりした

起こったこと Playwrightで遷移先ページのタイトルを評価しようとしたら成功したり失敗したりとフレイキーなテストになってしまった。 Version "@playwright/test": "^1.28.1" コード 対象HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>test</title> </head> <body> <main> <a href="…

#TypeScript#playwright
石井飛鳥　大廻天カルペディエム•2日前

石井飛鳥　関連リンク

★お仕事の依頼/Contact★ 写真スチル及び動画の撮影、演出、脚本、美術、キャスティング、モデル派遣等承ります。モデル希望、俳優の出演希望、スタッフ希望の方、一緒に愉しいことしよー！お問い合わせお待ちしております。Still,Movie,Direction, Playwright.Model,Actor,Staff,and more. www.kaitenhyakume.com 以下、アカウントがめっちゃ増えているのでここにまとめておきます。ishiiasukaで統一したいんだけど先人のいるところではisiiasuka 🎭虚飾集団廻天百眼/Kaitenhyakume theatre.co.…

石井飛鳥　大廻天カルペディエム•2日前

石井飛鳥　自己紹介

俺 石井飛鳥（いしいあすか） 脚本家、演出家、写真家 虚飾集団廻天百眼主宰 廻天百眼旗揚げからの全作品の脚本、演出を担当。代表作に、丸尾末広原作の舞台版『少女椿』、寺山修司原作の『奴婢訓』の再演、江戸川乱歩作品を融合した『悦楽乱歩遊戯』、オリジナル作品の『冥婚ゲシュタルト』など。 外部作品では映画『東京残酷警察』のスピンオフシリーズの脚本・監督、宝生流能楽公演『葵の上』ナビゲーション台本、赤坂BLITZでのkαinワンマンライブの演出、Rakuten Fashion Week TOKYOのブランド演出、ヴァレンティノのキャンペーンビジュアルへのプロップ協力、SNSを使った参加型ホラーゲーム「イ…

omoisan-blog•2日前

playwright - 複数要素

import { test, expect } from "@playwright/test" test("複数の要素を取得した時の処理", async ({ page }) => { await page.goto("https://www.lambdatest.com/selenium-playground/bootstrap-dual-list-box-demo") // 要素を取得 const links = await page.locator(".footer-menu > li > a") //１番目の要素をクリック // await links.first().click() …

備忘録•16日前

Playwright(C#)でファイルをアップロードする方法

Ⅰ. はじめに タイトルの通り「Playwright(C#)でファイルをアップロードする方法」です。 Ⅱ. 手順 1. Webサーバー側サンプルプログラムを書く # pip install flask==2.2.3 from flask import Flask, request, Response app = Flask(__name__) @app.route('/', methods=['GET']) def index(): return ''' <form id="form001" action="/upload" method="post" enctype="multipart/f…

SYM's Tech Knowledge Index & Creation Records•16日前

Knowledge Stack & Index (全記事一覧)

目指していた INPUT:OUTPUT = 1:1以上 の理想形は Link & TechTips Stack の形なのかもしれない（※仮挿入） 本ブログと並列運用(更新不定期) 本ページは投稿記事一覧です。 (自動更新) Architecture MicroArchit マイクロサービスアーキテクチャ メモ (2022/05) 【マイクロサービス】可観測性と OpenTelemetry (基本のみ) (2022/12) Program Java Java Assertj + Mockito (2022/02) Gson Serialize (Object -> String) での時刻フォー…

葛葉アプスとちらし寿司•17日前

AWS Amplifyのテストフェーズではnpx playwright install chromiumeがいらなかった

日付 2023/03/02 起こったこと AWS Amplifyのテストフェーズで無理やりPlayWrightを使っているのだけれども、結果的にはnpx playwright install chromiumeコマンドを実行しなくても動いた そもそも AmplifyのE2EテストにはCypressが標準で使えるようになっているけれども、それのおかげかテストフェーズではChromiumeが自動で動いた。 ほかのブラウザだとどうかはわかんない。 AmplifyでE2Eを書くには これを参考にしてください。 docs.aws.amazon.com

LIFULL Creators Blog •19日前

LIFULL HOME'S 賃貸物件詳細ページの基盤刷新について

プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸部門のフロントエンド開発をしています。 近年、LIFULL の開発部門では「開発生産性」という言葉が取り沙汰されるようになりました。 LIFULL HOME'Sの主要リポジトリは10年以上運用され続け、今も多くの開発者によって日々改修され続けています。 長い年月の中で小さな設計ミスも積み重なって大きくなり、ちょっとした実装でも入念な調査が必要となり開発生産低下の要因となっていました。 また10年以上前に採用したフレームワークで稼働しているため、今ではドキュメントを探すのも一苦労という具合です。 そこで主要開発…

Link and Motivation Developers' Blog•20日前

Vue2系からVue3系に移行しました〜！

こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue…

プログラム備忘録•22日前

2/27 PlaywrightでE2Eテストを実装

PlaywrightでE2Eテストを実装しています。クライアントから以下の点が分からんと言われたので対応策考えながらの実装です。 ・classやidはテスト用に整ってないからDOMの取得方法を検討してほしい ・テストケースを綺麗に整えてほしい DOMの取得方法まずDOMの取得はdata属性を付与するようにしました。 classやidでも取得できますがテスト用に振り分けた方がより独立性を保てて良さそう。 class名やid名の変更などに影響を受けてしまいますからねぇ。E2Eテストで有名なcypressのドキュメントを見てみると、 data属性を付与するのがベストだよって書いてました。なるほど。d…

ひと夏の技術•23日前

Playwrightで2FA(二要素認証)が必要なサイトをテストする

2FA: two-factor authentication = 二要素認証/2要素認証 この記事では以下、2FAで記載する。 E2Eとセキュア問題 E2Eテストするサイトがログインが必要かつ2FAが必須というサイトが当たり前になりつつある。 で、E2Eテストするときにヘッドレスブラウザ上で当然ログインする必要があるわけなのだけど、2FAをどうすればいいかという問題がある。 公式ガイドの認証情報取り回し方法を見る 認証情報を全テストで共有する方法と、どう扱うかというガイドがある。 Authentication | Playwright 詳細は読んでもらうとして、ざっくり見ると mkdir -p…