Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers

2024/04/25 108 users NewsPicks playwright 海老澤 テスト手法

はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用... 続きを読む

【Playwright】v1.4系の新機能まとめ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/04/12 12 users playwright ラクス koki_matsura 独断

こんにちは、フロントエンド開発課所属のkoki_matsuraです！ 本記事では、E2EテストライブラリであるPlaywrightのv1.40 ~ 最新版v1.43で追加された機能の中から僕の独断と偏見でいくつかを紹介したいと思います。 では早速、紹介していきます！ 以下は目次です。 v1.40の新機能 Test Generatorにアサーションコード生成... 続きを読む

E2EテストでNextAuth認証(OAuthなど)を突破する方法

2024/03/07 72 users OAuth playwright Auth.js 認証方式

NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 ... 続きを読む

ZennのE2Eテスト基盤をリプレイスしました（開発体験向上、CI時間の短縮、Playwright移行）

2024/01/30 21 users Zenn 後回し ユーザ 短縮 リリース

はじめに 2023年にZennチームにJoinしたdyoshikawaです。 このたびZennのE2Eテスト基盤をリプレイスしました。このような下回りの改善はユーザへの価値提供との距離が近い機能開発と比べてどうしても後回しになりがちな中、Publication Proという大きなリリースを迎えて少し開発が落ち着いたタイミングであり、E2Eテスト... 続きを読む

E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog

2024/01/17 46 users playwright Capybara Sasaki 移行

こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案... 続きを読む

【E2Eテスト】ページオブジェクトモデルを使ったらメンテ地獄から解放された話 - RAKUS Developers Blog | ラクス エンジニアブログ

2023/05/23 36 users ラクス POM koki_matsura きっかけ 概要

こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、僕が開発に携わっている製品のE2Eテストに取り入れたページオブジェクトモデル(POM)という実装パターンの概要と取り入れたキッカケ、POMへリファクタリングする簡単な例をご紹介させていただきます。 僕と同じようにE2Eテストに関わっている方、E2E... 続きを読む

Mailosaurでメール送信のE2Eテスト - febc技術メモ

2023/02/07 105 users Platform SaaS febc技術メモ 添付ファイル

最近MailosaurというSaaSを使ってメール送信機能をテストしてみましたので、備忘がてら紹介メモを残しておきます。 Mailosaurとは? Mailosaurとは Email and SMS testing platformだそうです。 mailosaur.com メールがちゃんと送れているか?だとかメール本文/添付ファイルなどは意図通りか?をテストするのに便利な機能が... 続きを読む

何度も挫折してきたE2Eテストだけど、今後はDatadog Synthetics Testsが良さそうかも - LIVESENSE ENGINEER BLOG

2022/12/20 22 users LIVESENSE ENGINEER BLOG SaaS

これは Livesense Advent Calendar 2022 DAY 20 の記事です。 はじめに 株式会社リブセンスの転職会議事業部Webエンジニアの @ishitan-liv です。 今回は、過去に転職会議でも導入しようとして挫折してきたE2Eテストについて書きます。 E2Eテストを自作するか、SaaSを使うのかで比較した結果と、Datadog Synthetics Test... 続きを読む

SeleniumによるAPI呼び出しを含むE2Eテスト自動化 - asoview! TECH BLOG

2022/12/02 23 users アソビュー 前職 Selenium asoview 裏面

アソビュー！ Advent Calendar 2022の2日目（裏面）の記事です。 アソビューでQAをしている渡辺です。 前職ではエンジニア、およびQAをしておりましたが、10月よりアソビューにQAとして入社しました。 今回は、API呼び出しを含むE2Eテストの自動化を、他社ウェブサイトに仕様記載の無料公開APIで試してみた話となります... 続きを読む

ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol

2022/03/29 154 users WebDriver ウェブアプリケーション Appium

ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後にいるWebDriver、Chrome DevTools Protoc... 続きを読む

E2Eテストのテスト結果を可視化することで気づきが生まれた

2022/03/26 56 users テスト結果 可視化 Automation 通称AQA メルカリ

メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の おれたま@AHA_oretama です。 私は普段、テスト自動化やCI / CD を主に行っています。 今回は、Appium×Android E2Eテストのテスト結果の見やすさを改善し、テスト結果を可視化することで気づきが生まれた話について、紹介していきたいと思いま... 続きを読む

開発時の動作確認ツールとしてCypressのE2Eテストを導入した話 - visible true

2022/01/11 17 users Cypress visible true 開発時

ユビーAI問診は、Ubieが提供する医療機関向けのプロダクトです。患者さんに対して問診を実施し、医師向けのカルテを作成します。現在は大きく分けて、タブレットとスマートフォンの２つの利用方法があります。 タブレット用、スマートフォン用の画面 これらはどちらもWebアプリケーションとして実装していて、フロントエ... 続きを読む

Cypressで始めるReactのE2Eテスト-導入から実際にテストを書いてみよう！

2021/03/23 15 users 兼ね合い 工程 Cypress フロントエンド みむら

こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで... 続きを読む

新しすぎるものは避けてアーリーマジョリティくらいを目指そう　息の長いサービスを少しずつ改善していく営み - ログミーTech

2020/11/26 18 users React TypeScript ログミーTech テーマ

株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽明細」の機能開発を担当する三田英一氏が登壇し、「息の長いサービスのフロントエンドを少しずつ改善していく営み」という内容で話をしました。関連資料はこちら。 フロントエンド... 続きを読む

新規機能はどんどんコンポーネント化　Vue.js + TypeScriptで開発してよかったこと・つらかったこと - ログミーTech

2020/11/25 148 users React TypeScript フロントエン Vue.js

株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽勤怠」の機能開発を担当する北嶋初音氏が登壇し、「Vue.js + TypeScriptによる新規サービス開発の振り返り」という内容で話をしました。関連資料はこちら。 会社初のフロントエン... 続きを読む

Postman, Newman で始める E2E テスト - Techtouch Developers Blog

2020/07/22 23 users Postman misu GitHub Actions 弊社

バックエンドエンジニアの misu です。最近はブンブンチョッパーでチャーハンやドライカレーばっかり作ってます。 この記事について 内容 Postman と Newman について モチベーション 実行例 テストの設定 Github Actions にのせる E2Eテストを陳腐化させないために その他 参考 この記事について 弊社では REST API 定... 続きを読む

なぜE2Eテストでidを使うべきではないのか | Autify

2020/01/15 12 users Autify Cypress TestCafe set 末村

こんにちは。AutifyのSET(Software Engineer in Test) 、末村(@tsueeemura)です。 皆さん、E2Eテストしてますか？以前はほぼSelenium一択みたいなところがありましたが、最近はPuppeteerやCypress、TestCafeなどいろいろなフレームワークがあり、ついつい目移りしてしまいますね！ さて、どのフレームワークを使うにせよ... 続きを読む

E2EテストをSelenium Webdriver からCypress.io に移行した話 - 一休.com Developers Blog

2019/04/23 285 users Selenium WebDriver Selenium

こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、E2EテストをSelenium WebdriverからCypress.ioに移行した話をしたいと思います。 一休のE2Eテスト事情 あれから、数年が経過して、、、 どうしてこうなった？？？ SeleniumではSPAへの対応が難しくなってきた なんでもかんでもSeleniumで頑張... 続きを読む

E2Eテストを導入して自分を救う (TestCafe編) - SCOUTER開発者ブログ

2019/04/16 36 users SCOUTER開発者ブログ 自分

こんにちは、自意識過剰な正義のヒーローでお馴染みの株式会社SCOUTERの石岡 将明( @masaakikunsan )です。 先月のブログで、フロントにおける unit test についてブログを書いている人がいたので、今回は E2E テストについて書いていこうかなと思います。 E2E テストとは E2E (End to End)テストとは Web ブラウザを通... 続きを読む

E2Eテストのテスト結果を可視化することで気づきが生まれた - Mercari Engineering Blog

2019/02/12 73 users Mercari Engineering Blog 可視化

メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の おれたま@AHA_oretama です。 私は普段、テスト自動化やCI / CD を主に行っています。 今回は、Appium×Android E2Eテストのテスト結果の見やすさを改善し、テスト結果を可視化することで気づきが生まれた話について、紹介していきたいと思いま... 続きを読む

ブラウザーを自動で操作し動作確認できる、「Angular」のe2eテスト (1/3)：CodeZine（コードジン）

2018/08/22 44 users CodeZine angular ブラウザー コードジン 動作

本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのバージョン6で追加された新機能を紹介しました。今回は、Webブラウザーを自動的に操作してAngularアプリの動作を確認できる、e2eテストの利用方法を説明します。 はじめに Angularは、Googleと... 続きを読む

なぜE2Eテストがたまに落ちるのか / How do E2E tests fail randomly - Speaker Deck

2018/07/14 53 users Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました - LCL Engineers' Blog

2018/06/27 163 users PhantomJS puppeteer Capybara

Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテ... 続きを読む

AlexaでE2Eテストを書けるようにした話 - クックパッド開発者ブログ

2018/06/05 72 users alexa 知見 クックパッド開発者ブログ Alexaスキル

2018 - 06 - 05 AlexaでE2Eテストを書けるようにした話 研究開発部の伊尾木です。 研究開発部では、Alexaのスキルを公開しています（Google Assistantも公開していますよ！）。 今回はAlexaスキルのテストを便利にする Kuchimane というツールを公開したので紹介したいと思います。 E2Eテストが難しい 音声UIの開発はまだまだ新しい分野で知見やツールがそ... 続きを読む

サービスの目視チェックをヘッドレスブラウザで効率化した話｜raahii｜note

2018/04/03 130 users ユニットテスト ヘッドレスブラウザ Note 一連 パク

■ モチベーション サービスを継続的に改善していく上で、バグを避けることはできません。そこで、バグが混入した時にそれにいち早く気付ける仕組みが必要になります。 Webサービス開発ではふつう、ユニットテストを書きます。一連のページ遷移（動線）をチェックするE2Eテストを書くこともあります。これらを用いることで、バグに簡単に気づくことが出来ます。 しかし、フロントエンドのエラーには微妙なページデザイン... 続きを読む