JavaScript / TypeScriptの引数をひと工夫しよう｜Showcase Gig Product Team Blog
こんにちは、2020年10月に入社したばかりの坂口です。現在SET(Software Enginner in Test)として頑張っています💪 SETでは主にE2Eテストの作成/保守を担当しています。弊社のプロダクトはWebアプリケーションが多いため、WebのE2EテストとしてPlaywrightを採用し日々テストの拡充をしています。 日々テストコードを書いている中で少しでも可読性をあげようと引数を工夫してわかりやすくした例を紹介します。 環境・Node.js 15.8.0 ・TypeScript 4.2.3 この記事ではより恩恵が受けられるTypeScriptを使います。 オブジェクト引数引数は通常numberを受け取ったり、stringを受け取ったり、クラスやインターフェースといった型を引数に指定します。 async function setLocation(latitude: nu
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
待望のSvelteKit 1.0がリリースされましたね！ https://svelte.dev/blog/announcing-sveltekit-1.0 早速、microCMSとの連携を試してみたいと思います。 Svelteとはビューを生成するライブラリです。 ReactやVueと異なる点は、ライブラリのコードをほとんど含まないVanilla JSに近い形でコンパイルされるという点です。 そのためコンパイル後のJSファイルのサイズが小さく、高いパフォーマンスが期待できます。 「ライブラリのコードをほとんど含まない」ことを実現するために、SvelteではVirtual DOMを敢えて採用せず、代わりにコンポーネントを非常に効率的な命令型コードに変換して、DOMをピンポイントに更新します。 SvelteKitとはSvelteと組み合わせて使うアプリケーションフレームワークです。 NextやN
JSer.info #602 - Safari 15.6がリリースされました。 Safari 15.6 Release Notes | Apple Developer Documentation New WebKit Features in Safari 15.6 | WebKit 基本的には、Safari 15.5のバグ修正が中心となっているリリースです。 加えて、CSSの:modal擬似クラスのサポートが追加されています。 Deno 1.24がリリースされました。 Deno 1.24 Release Notes Deno 1.21から段階的にtype checkの挙動を変更していました。 この変更が続く形で、コード出力やtype checkのアーキテクチャのリファクタリングを行い、パフォーマンスが改善されています。 またウェブ互換を目的としたunhandledrejection/bef
JSer.info #610 - フルスタックウェブフレームワークのRedwood 3.0がリリースされました。 Redwood 3.0.0 is now available! - Announcements / Releases and Upgrade Guides - RedwoodJS Community Node.js 12のサポート終了、プリレンダリングの対応、TypeScriptのStrict Modeに対応、Fastify v4/Jest 29/Prisma v4へのアップデートなどが含まれています。 また、既存のパスワード認証に加えて、WebAuthnでのログイン/サインアップのサポートなども含まれています。 Self-hosted Authentication (dbAuth) | RedwoodJS Docs 次のスライドでは、Software Supply Chain
JSer.info #592 - Solid 1.4.0がリリースされました。 Release v1.4.0 - Level Up! · solidjs/solid Solid v1.4.0リリース。 createStoreでトップレベルの配列をサポート、deferStreamオプションの追加、createResourceで常に最新の値を取得する.latestプロパティが追加されています。 また、Custom Renderersを複数組み合わせて利用できるようになっています。 playwright v1.22.0リリースされました。 Release v1.22.0 · microsoft/playwright Playwright TestにComponent Testingを試験的に実装されています。 Experimental: components | Playwright WAI-A
Vitest の Browser Mode (experimental) でファイル読み込みのテストを書く - ジンジャー研究室
趣味でブラウザ上に画像や音声を読み込んで作業する React アプリを作っているのだが、 Vitest + Testing Library でテストをしようと思ったらファイル読み込み部分でつまづいた。Node.js 上でブラウザ環境をシミュレートしている部分がそのままでは上手く動かないので、 polyfill を入れたり沢山モックを差し込んだりするとなんとか動く。が、色々弄りすぎて本当にテスト出来ているのか怪しいし、やはりリアルなデータでテストしたい。 で、リアルなブラウザ環境でテスト出来ないかなと調べていたところ、２つの候補が挙がった。 Browser Mode | Guide | Vitest Experimental: components | Playwright 両方とも experimental 。前者は Vitest をそのままブラウザ上で実行するというもので、後者は Pla
📦 作ったもの GitHub Trendingに掲載されたリポジトリを定期的につぶやく Twitter Bot を作りました。 全体のトレンドをつぶやく@gh_trending_と、JavaScript・TypeScript のトレンドをつぶやく@gh_trending_jsの 2 種類があります。 @gh_trending_ @gh_trending_js 仕様はこちらです。 30 分から 1 時間おきに GitHub Trending に掲載されているリポジトリをツイート 一度ツイートたリポジトリは再度掲載されていても 1 週間はつぶやかない 投稿内容はリポジトリ名、URL、スター数、作者の Twitter アカウント、言語、概要 技術スタックは Firebase Cloud Functions と Firebase Firestore です。 実装コードは全て以下リポジトリで公開し
CircleCIにPlaywrightを組み込んだ話
こんにちは！saimyonです！ Social Databank Tech Blog Advent Calendar 2023の14日目です。 今回はCircleCIにPlaywrightを組み込んだ話をします🎭 きっかけ 私は弊社製品「Liny（リニー）」のQA担当として日々品質を格闘しております。 LinyのE2Eテストは現在、全て手動で実施しています。 そのため、新機能を入れた際にデグレが発生していたとしても、そのデグレが（ユニットテストでは発見できず）E2Eテストでしか発見できない場合、検証項目から漏れているとそのデグレに気付けない状況です。 ということで、この状況から脱却すべく、E2Eテストの自動化に取り組むことに。 LinyではCI/CDにCircleCIを使用しているので、そこにE2Eテストを組み込むこととなり、本記事を書くことと相成りました。 デグレ、本当に怖い。 やった
Storybook Tutorials
professional developers experienced with JavaScript, React and Storybook. If you're not quite there yet, visit Intro to Storybook to learn the basics! Testing UIs is awkward. Users expect frequent releases packed with features. But every new feature introduces more UI and new states that you then have to test. Every testing tool promises “easy, not flaky, fast”, but has trade-offs in the fine prin
svg2png-wasmをつくった
つくったもの svg2png-wasm という名前に全ての情報が入っていますが、 WebAssembly を内部で利用して SVG 画像を PNG 画像に変換することができます。 つくった経緯 SVG のメリット SVG は XML で記述されるベクター画像ですが、以下のような利点があると考えています。 ベクター画像なため拡大してもドットが見えてこない 文字列で構築できるので（文字や図形を中心とした画像を）非常に低いコストで動的に生成できる Markdown で記述されたドキュメント内で表示できる（ついでにアニメーションできる） よく見るこれも SVG svg2png-wasm のアイコンも SVG SVG のデメリット 動的に生成しやすいとなると OGP の画像に設定したくなります（なります）。 ですが、そうは問屋がおろしません。 Facebook のドキュメントによれば、JPEG, G
Explore Azure Get to know Azure Discover secure, future-ready cloud solutions—on-premises, hybrid, multicloud, or at the edge Global infrastructure Learn about sustainable, trusted cloud infrastructure with more regions than any other provider Cloud economics Build your business case for the cloud with key financial and technical guidance from Azure Customer enablement Plan a clear path forward fo
CLOMOのブラウザテスト自動化の歴史とこれから - i Cubed Systems Engineering blog
こんにちは。アイキューブドシステムズでCLOMOの品質保証（QA）チームメンバーのt-yamadaです。QAチームの中で、特に自動テストをメインに担当しています。 自動テストを担当しているものの、実はあまりプログラマー寄りのエンジニアではありません。そのため、細かい開発知識よりも、テストエンジニアとしてどのように自動化に取り組み、失敗し、どのようにしたらうまくいったのかを紹介しようと思います。 テスト自動化の導入まで – 膨大に増加するテスト工数 CLOMOは次々と新しい機能が増えており、それに合わせてテストの試験項目が増え、必要工数も爆発的に増加しています。 私が入社した2013年からCLOMOに自動テストが導入された2015年までで、試験項目数が4~5倍くらいに増加しており、そのまま運用を続けると試験項目数に対してテスターが足りなくなってしまうのは目に見えていました。 テスト自動化の導
お気に入りの技術スタック2023年バージョン
小~中規模の SaaS アプリケーションを一人で立ち上げる時は、このスタックで作ることが多いです。 少しでもコード行数を減らして楽できるように、日々試行錯誤しています。 Vercel - ホスティング Vercel Postgres Vercel KV Vercel Blob Cron Jobs TypeScript - 言語 Turborepo - モノレポ Next.js- フレームワーク App Router Server Actions Prisma - ORM ER 図 Tinybird - 時系列 DB Inngest - ジョブキュー NextAuth - 認証 t3-env - 環境変数 Tailwind - CSS フレームワーク Shadcn - UI コンポーネント Tremor - グラフUI AutoForm - フォーム React Hook Form Zod
完全に理解できる！Playwrightことはじめ
はじめに 本記事では、Playwrightを使ったテスト実装についてざっくりとまとめます。 この記事は誰のためのものか ✔ Playwrightで可能なことを知りたい人 ✔ 使い方を忘れてしまった人、及び未来の私 🎭 Playwrightとは Microsoftが中心となり、OSSとして開発しているWebテスト/自動化のためのフレームワークのことを指します。主にE2Eテストで利用します。 OSS(Open Source Software)とは？ ソースコードが公開されていて、誰でも自由に利用・改変・再配布することができるソフトウェアのことです！OSSは、有志のコミュニティによって開発され、メンテナンスされています。
Deno Deploy で WebAuthn を使ったサイトを作ってみた - ジンジャー研究室
作ったもの Kaleidoshare という、オンライン万華鏡を作って共有できるサービスを作ってみた！ kaleidoshare.deno.dev コードはここ。 github.com 作品は Twitter で公開できる。 桜🌸https://t.co/xlJO3yKcRa— Yosuke Torii / ジンジャー (@jinjor) June 16, 2023 まだまだ粗い部分が多いのだが、そもそもの目的が技術検証なのでまあこのくらいの完成度で良いでしょうということで（メンテするのがめんどくさい）。でも面白いと思ったら試してみてね。 動機 Deno Deploy は Cloudflare Workers のようにエッジに簡単にデプロイできるサービスの中でもパフォーマンスで群を抜いているらしく、以前から気になっていた。最近 Deno KV という分散ストレージが使えるようになったので
ReactやVueの普及に伴い、ボトムアップで小さなコンポーネントを組み合わせてページを作る「コンポーネント駆動開発」がスタンダードになりつつあります。 このコンポーネント駆動開発は、複雑度がそれなりに高くページ数も多い中・大規模システムで採用される事例をよく見かけます。 小さな規模の画面開発でコンポーネント駆動開発を実践するとどうなるのか？ 実装やテストでどのような恩恵が得られるのか？ 保守開発を踏まえてコンポーネント駆動開発でやる価値はあるのか？ といった話はあまり聞かないので、弊社ネットプロテクションズのNP後払い事業における支払い画面のフロントエンド開発事例を記事にしてみました。 実際にやってみた感想として、小さな画面開発でもコンポーネント駆動開発の恩恵は十分に受けることができました。 Atomic Designは難しい コンポーネント駆動で開発するために、まず最初に考えるのは「ど
この記事は ミライトデザイン Advent Calendar 2021 の12日目です🚀 11日目は @suzuki-hoge さんでした。 Playwrightって何？ webテストを自動化するためのフレームワークですね。 Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast. githubの引用をGoogle翻訳したもの Playwrightは、Webテストと自動化のためのフレームワー
Storybook 8.1
Storybook is the industry standard workshop for building, testing, and documenting UI components. Thousands of developers use it every day, including teams at BBC, Etsy, and Dropbox. Over the past year we’ve focused on quality of life maintenance work. This culminated in the March launch of Storybook 8.0, our most performant and stable release yet. Now in 8.x, we’re back on the hunt to improve you
こんにちは。メディアサービス開発部Webアプリケーション開発課の奥川です。ニコニコ漫画のバックエンド開発を担当しています。 ニコニコ漫画ではe2eテストに Playwright を導入しており、OpenID Connectでの認証フローやAPIテストなど主にiOS/Androidアプリとの連携部分の検証に利用しています。 アプリ連携ではカスタムURLスキームを用いてアプリを起動することがあり、この際に意図通りのURLやパラメータを応答できているかを確認したいテストケースが存在します。カスタムURLスキームとは、 http:// や https:// の代わりに example:// のような独自のプレフィックスを用いて特定のアプリを直接起動できるURLパターンです。これにより、ウェブページや他のアプリから特定のアプリ内の特定のページや機能を直接呼び出すことが可能になります。 Playwri
今年サボった勉強を冬休みで全部取り戻す計画
どうも、仕事を納めてしまうと、何も予定がない人になってしまった人です... てなわけで、公式ドキュメント、リリースノート、信頼できる情報源全部読んじゃうぞという計画を立てました。計画倒れしないようにちゃんと読むことをブログで宣言します！ 何をするのか マジでやること何もないので、日頃サボったプログラミングの勉強を一気にしようと思っている。「勉強していない」なんていうと「嘘つけ」と言われそうだが、いつも必要になったことをその都度調べて誤魔化しているだけであり、読むのは本や記事といった誰かの二次三次情報なので、実は一次情報には触れていない。なので以下に挙げるドキュメントは実はちゃんと読んだことがない。全て雰囲気で使っている。 そのため自分は歳の割には未知になっている範囲がとても多く（この構文ってフリーレンぽくてなんかかっこいいよね）、未知の未知にとても弱いため、わかっている人から見るとおかしな
2023 / 2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。 以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2023 8回目のJavaScript ライジングスターにようこそ！ ここでは、2023年のJavaScriptエコシ
from playwright.sync_api import Playwright, sync_playwright def run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() # Open new page page = context.new_page() # Go to https://www.google.com/?gws_rd=ssl page.goto("https://www.google.com/?gws_rd=ssl") # Go to https://www.google.com/search?q=Playwright+Python&oq=Playwright+Python&aq
![[Python]Playwright ブラウザ操作自動化 メモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/80f7905527b8ac12e42baf51b522480649842997/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUHl0aG9uJTVEUGxheXdyaWdodCUyMCVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MiVBNiVFMyU4MiVCNiVFNiU5MyU4RCVFNCVCRCU5QyVFOCU4NyVBQSVFNSU4QiU5NSVFNSU4QyU5NiUyMCVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2EwYmI5MjVmNTk0MTRmYzM5NTUyY2IzMDljM2U0MWI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBLV1NfMDkwMSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGUzMThhOTAyZDZhMWNkOGQzOTE4NDE1NzVkNzk0ODQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D4a00baddfc7f3490e56a62d901c37390)
pytest で E2E テスト
pytest で E2E テストが本当に便利です。 実際どう使っているかを紹介しておきます。 なぜ Python でテストなのか 自分が Python に慣れている 自分にとって pytest を超えるテストランナーが今のところない SpaceX がテストを Python で書いてて、じゃぁ Python でいいかとなった https://old.reddit.com/r/spacex/comments/gxb7j1/we_are_the_spacex_software_team_ask_us_anything/ft0bz35/ We use C & C++ for flight software, HTML, JavaScript & CSS for displays and python for testing. Rye のおかげで Python の環境構築が苦にならなくなった htt
この記事はQiita ソフトウェアテストのアドベントカレンダー 18日目の記事です はじめに e2eテストの検証の中で、Playwrightでもなく、Cypressでもなく、Seleniumでもない、すごくいいテストフレームワークのWebdriver.ioというものを発見したので普段Typescript, Javascript使いであればおすすめしたい。という思いでこの記事を記載します。 いいところ 開発元は OpenJS Foundationである Node.js, JQuery, Electron,Webpackなどの有名なJavaScriptプロジェクトをサポートしている 言語とエコシステムは JavaScriptとNode.jsベース 開発元はOpenJS Foundationであるため、開発はJavaScriptとNode.jsのエコシステムを使用する。 フロントエンドエンジニア
この記事はベリサーブ Advent Calendar 2020 - Qiitaの12日目です。 昨日はyaboxi_さんのオンプレミス環境でmablを動かせる"mabl Link"を使ってみる - Qiitaでした。AI自動テストツールも色々便利でいいですね！ AI自動テストツールも魅力的ですが、個人的にコードを書いて自動化するのもまた楽しいと思っていて、業務だけでなく個人でも色々なツールを触って遊んでいます。先日はPuppeteerのRecorderを使ってコード出力しました。 参考：GoogleChromeのDevToolsでブラウザ操作を記録し、Puppeteerのコードを出力してみる - Qiita 同じように、自分のブラウザ操作を記録してコード生成してくれる機能がplaywright-cliにもあると知って、試してみました。 結論から言うと、Puppeteerのものよりも「そのま
はじめに この記事では、Playwrightでテストを書いていく上で「こんな時どう書く？」をまとめた記事です。 コマンド集は公式ドキュメントにもあります。 コマンドがたくさんあり様々なことができます。 本記事ではその中からよく使いそうなこれだけはおさえておきたいものをピックアップして、要素の操作と検証など実践に使いやすい形のサンプルを用意してみました。 また、PlaywrightのテストコードだけでなくHTMLも合わせて載せておりますので参考にしていただけたらと思います。 以下のコマンドの紹介では、Playwrightのデモ用のページを利用しています。 デモページ：https://demo.playwright.dev/todomvc 環境 以下の環境下で動作を確認しました。 OS : Windows 10, Ubuntu 20.04 Node : v16.15.1 Playwrightで
mamagoto "Our Planet"【SUB】
The theatre company Mamagoto was launched in 2009 by playwright and director SHIBA Yukio as an internal unit of the renowned Seinendan theater company. Our Planet is the company’s first production, and after its premiere it was awarded the 54th KISHIDA Kunio Drama Award in 2010. After touring in 2011 in six cities across Japan, and its later revival in Tokyo and Shodoshima in 2015, Our Planet has
フロントエンド技術選定のヒント 【令和五年度版】 - KAKEHASHI Tech Blog
こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書いていきたいと思います。 ただし、本記事では個人的な好みというよりは、npm trendsやGitHub Star Historyなど客観的な指標からどんな技術が世間に受け入れられているかの比較にしていきたいです。 もちろん数値などの比較以外に、ドキュメントを読んだり使ってみたりすることも重要だということは言うまでもないと思います。あくまでも今回の記事が知らないライブラリを知る機会だったり、ヒントになれば幸いです。 もくじ パッケージマネージャ ランタイム フロントエンドフレームワーク レンダリングフレームワーク ビルドツール
Getting started with Playwright with Jest and TypeScript
This site uses cookies. Click here to find out moreOkay, thanks Playwright is a newish end-to-end cross-browser testing tool from Microsoft. I usually use Cypress for these kinds of tests on SPAs, but Playwright is quickly gaining traction, so I thought it was time to give it a try. We’ll cover how to get up and running with Playwright using Jest as the test runner and how to set up the project so
Web Test Runner: Modern Web
Web Test Runner Test runner for web applications. 👉 Headless browsers with Puppeteer, Playwright, Selenium or WebdriverIO. 🚧 Reports logs, 404s, and errors from the browser. 🔍 Debug opens a real browser window with devtools. 📦 Mock es modules using Import Maps. 🔧 Exposes browser properties like viewport size and dark mode. ⏱ Runs tests in parallel and isolation. 👀 Interactive wa
GitHub - playwright-community/jest-playwright: Running tests using Jest & 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
Why Storybook in 2022?
Teams around the world use Storybook to power their frontend workflows. But how it is used can vary immensely. Microsoft documents their Fluent design system. Mozilla develops pages for their web apps in isolation. While BBC automates testing for readers in every locale. The breadth of Storybook’s use cases makes it tricky for new folks to understand the core value. Why do developers actually use
こんにちは、hachi8833です。Kaigi on Rails 2023無事終了＆成功おめでとうございます！主催運営・スポンサー・スタッフ・参加者の皆さま、素晴らしいカンファレンスをありがとうございます。「参加してよかった」「幸せしかない」という声を何度となく直に耳にしました。 動画配信だけは現地で様子がわかりませんでしたが、こちらも順調だったようで何よりです。参加者は現地と動画視聴を合わせて1000人を超えていたそうです。 配信でしたが楽しめました！ 運営の方・登壇された方、ありがとうございました🙏🙏#kaigionrails — すずか (@suzuka_hori) October 28, 2023 次回のスタッフ募集に応募が殺到したという話に、特に成功の手応えを感じました↓。 #kaigionrails にご参加の皆様、お疲れ様でしたそしてありがとうございました！おかげさまでと
セッション概要 イベントページ 第1回は、4/24刊行の『フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識』の著者、吉井さんをお招きしました。 フロントエンドを含むWebアプリケーションの「テスト」に対する関心は年々高まっているものの、自信を持って「テストを実践できている」という現場はまだまだ多くないのが事実。フロントエンドのテストを根付かせるためにも、吉井さんは「テストには目的が大切」と語ります。 今回のセッションでは、『フロントエンド開発のためのテスト入門』で紹介したテストに関するトピックのなかでも、StorybookやWebアクセシビリティなど比較的新しいものを中心に、デモを交えながら紹介します。また本セッションを通じ「テストを書く目的」の大切さを伝えることで、テストを実践するきっかけとなる場を目指します。 参加者の方からの質問の回答（開催中に回
何度も挑戦し挫折してきたE2Eテスト、ついにSaaSのAI自動テストが福音となるか？！の巻 - GMOインターネットグループ グループ研究開発本部
2022.01.12 何度も挑戦し挫折してきたE2Eテスト、ついにSaaSのAI自動テストが福音となるか？！の巻 D.M.です。E2E テストのツール mabl について書きます。 TL;DR ・mabl はお手軽で素晴らしい。初期設定が簡単ですぐに開始できる。テスト作成とスケジュール設定が非常に簡単。修正もすぐにできる。 ・さすがに Google reCAPTCHA は突破できない（できたらそれはそれでヤバい）。Webアプリ側で仕様上の特殊な処理を設けるしかなさげ。 ・テストメール生成機能もあり非常に便利。（今回はうまく使えず。。） ・壊れたら自動でいい感じにしてくれる Auto Healing がすごい。逆に Auto Healing されたら困る、 NG にしたいケースでは Auto Healing をOFFにしたり、 Assert で正しい値が出ているかチェックするという逃げ道もあ
Playwrightでe2eテストを書いてみた
Table of Contents Togowlとは 私が開発している時間/タスク管理のWebアプリです。 バックエンドではTodoist/TogglのAPIを使っています。 同期機能を使ったリアルタイム性の高いアプリケーションですが、本稿ではそこまで高度なテストの書き方は紹介しません。 必要最低限の内容を紹介します。 Playwrightとは Microsoftが開発しているブラウザ自動テスト用のライブラリです。 大きな特徴として以下があります。 Chrome/Firefox/Safari/Edge すべてに対応 Linux/Mac/Windows すべてに対応 モバイルに適したテスト機能搭載 Sleepを使わない人間に直感的なテストコードが書ける 複数のブラウザやタブ、フレームをエミュレートしたテストが可能 なぜPlaywrightか 以下2つの記事を読んで、TogowlにはPlayw
パブリックプレビューになった Microsoft Playwright Testing を使って Playwright テストを並列実行してみた | DevelopersIO
パブリックプレビューになった Microsoft Playwright Testing を使って Playwright テストを並列実行してみた いわさです。 Web E2E テストを行うためのフレームワークには様々なものが存在しますが、その中のひとつに Microsoft が開発した Playwright というものがあります。 Playwright は Chromium、Firefox、WebKit のレンダリングエンジンをサポートしており、クロスプラットフォーム環境で使用することが出来ます。 Playwright のテストランナーは並列ワーカーの実行をサポートしており、大規模な E2E テストを CI/CD の中で実行する場合でも効率的に実行することが出来ます。 しかし、並列ワーカーを増やしたとしても CI/CD ワーカーのコア数など限度があり、テスト対象のブラウザやオペレーティング
この記事では、Backlog クラシックプランからの移行フローリニューアルの開発プロジェクトで、 Playwright を使いテストデータの作成を自動化したことについて紹介します。 今回、初めて Playwright をさわってみたのですが、複雑な手順をわかりやすいコードとして表現できるのがとても便利だったので知見と今後の課題をまとめます。 要約 テストデータの作成に時間がかかり、十分に手動テストができていなかった Playwright などのツールを使って自動化することで、効率よく不具合を発見できるようになった 継続的に E2E テストとしてメンテナンスしてゆくためにはさらに工夫が必要 開発を進める上で感じた課題 仕様変更によって多くのテストデータを用意する必要が発生した このプロジェクトでは、開発チームが中心となって大まかなフローや画面設計を作っていました。その一方で、画面上の文言やシ
Playwright でタイマーモックが使えるようになる
どうもこんにちは、@nzws です。（ちょうど気になったネタを見つけたので Zenn 初投稿です） 今回は記事執筆時点で次バージョンの Playwright v1.45 で追加される予定である Clock API についてお試ししたことを書いていきます。 背景 背景について簡単に説明すると、タイマーモックは自動テスト内で時間を操り、コード内で時間に依存するような機能を上手く短時間でテストさせるための機能です。 ユニットテストフレームワークの Jest[1] や Vitest[2] は標準機能としてタイマーモックが提供されていますが、E2E テストフレームワークの Playwright ではタイマーモックが今まで標準機能としては提供されていませんでした。[3] 余談ですが前述の Jest や Vitest だと setTimeout/setInterval みたいなものは標準機能でモックされ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Release v1.23.0 · microsoft/playwright
SvelteKit + microCMS のブログ作成チュートリアル
2022-07-26のJS: Safari 15.6、Deno 1.24、CSS behind Figma
2022-09-21のJS: Redwood 3.0.0、npmの新しい機能、Wasmtime 1.0
2022-05-17のJS: Solid v1.4.0、playwright v1.22.0、Safari 15.5
GitHub Trendingを定期的につぶやくTwitter BotをFirebaseで作ってみた
Microsoft Playwright Testing | Microsoft Azure
難しく考え過ぎないコンポーネント駆動開発 - Qiita
Playwrightを使ってブラウザ操作を自動化してみよう
PlaywrightでカスタムURLスキームへの遷移をテストする
【JavaScript】JavaScript ライジングスター 2023 - Qiita
[Python]Playwright ブラウザ操作自動化 メモ - Qiita
Webdriver.ioという自動テストフレームワークはおすすめ
playwright-cliでブラウザ操作からコード生成した - テストウフ
これだけはおさえておきたいPlaywrightコマンド集 - Qiita
Kaigi on Rails 2023に参加しました（Day2）｜TechRacho by BPS株式会社
【アーカイブ動画】Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
Playwright を使ってテストデータ作成を自動化した話 | 株式会社ヌーラボ(Nulab inc.)