えぇっ、Nx Cloud を知らない！？――前編：「CIで分散並列実行とキャッシュ利用ができるだって！？」―― - Techtouch Developers Blog
さあさあ、面白そうなタイトルに惹かれて(?)やってきたそこのあなた！ありがとうございます！！ はじめまして、テックタッチの canalun と言います👶 普段は DOM について考えたり、CI/CD の改善をしたりな毎日です！ DOM が好きすぎて週刊DOMDOMタイムスというのをやってますので、興味がある方はぜひ見てみてくださいねえ🌞 この記事では前後編2回に分けて、Nx Cloud の主な機能の紹介と実際の導入の仕方を解説します！！ 前編にあたる本稿では、Nx Cloud の2大最強ポイントである「CIの自動分散並列実行」と「CI結果のキャッシング」を紹介します。 ちなみに後編ももうあるよ。 tech.techtouch.jp では早速行きましょう！ 目次を見てオモロそうなところだけ読むもよし、とりあえず上から読んでみるもよしです。自由にやってくれ！！ 👇👇 これは一体なんの記
Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、転職サービス Findy の開発チームにおける開発生産性の向上に対する取り組みをご紹介します。 以前の状況 モノリスの解体 開発基盤の刷新 コンポーネント設計の刷新 テストの拡充 CI の高速化 改善の効果 まとめ 以前の状況 2020年頃の Findy は Ruby on Rails と React のモノリス構成で作られていました。 機能の増加に従いコードが複雑化し、しだいに開発スピードが伸び悩むようになりました。 ここで Findy Team+ で算出した当時のリードタイムを見てみましょう。 2020年のFindyのリードタイム 上記のグラフから次のことがわかります。 改修が本番に適用されるまで 約1週間 かかる プルリクエストがレビューされるまで 約5日 放置される
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Test
【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
VRTツールとしてLost Pixelを使ってみたらいい感じだった
Lost Pixel Lost PixelとはWeb UIのビジュアル回帰テスト(VRT)のためのツールであり、キャプチャの撮影と差分の検出を一つのプロセスで行うことができるオープンソースライブラリです。 Web UIのVRTというと、storycap + reg-suit や、Playwrightのスナップショット機能、または Chromatic のようなサービスを思い浮かべる方も多いと思いますが、まさにそれらの類似ツールにあたるものであると捉えていただいて差し支えありません。 本記事では具体的な導入手順などは省き、Lost Pixelの特徴や他の類似ツールとの比較、または筆者の用途とカスタマイズについて紹介します。 記事を読んで、実際に導入を検討される場合のインストール方法やセットアップに関しては、公式のドキュメントを参照してください。 また、Lost Pixelにはプラットフォームモ
Storybook 腐らせない
この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツールです。 しかし、このように有用なStorybookが「腐ってしまう」ことがあります。この記事で「腐る」とは、コンポーネントをStorybookに表示するための設定であるStoryが最新の状態に更新されていない、またはプロジェクトにとって負債になっている状態を指します。例えば、以下のような状態が「腐っている」状態にあたります。 npm run storybook するとそもそもエラーがでて表示されない Storyの存在しないコンポーネントやコンポーネント
【E2Eテスト】ページオブジェクトモデルを使ったらメンテ地獄から解放された話 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、僕が開発に携わっている製品のE2Eテストに取り入れたページオブジェクトモデル(POM)という実装パターンの概要と取り入れたキッカケ、POMへリファクタリングする簡単な例をご紹介させていただきます。 僕と同じようにE2Eテストに関わっている方、E2Eテストに興味を持っている方などに読んでいただけると幸いです。 目次は下記のようになっています。 POMとは なぜPOMを使い始めたのか POMへのリファクタリング ログイン画面 テスト内容 POM導入前のテストコード ページオブジェクト作成 POM導入後のテストコード 終わりに POMとは Webアプリケーションのテスト自動化において、テストコードとWebページを分離して管理する手法です。 POMを使わない従来のテストコードはWebページと分離しないため、どうしてもD
複雑なシステムでは、すべての要素が正しくても障害が起きる。カオスエンジニアリングから継続的検証へ（前編）。JaSST'23 Tokyo基調講演
複雑なシステムでは、すべての要素が正しくても障害が起きる。カオスエンジニアリングから継続的検証へ（前編）。JaSST'23 Tokyo基調講演 Netflixが始めた「カオスエンジニアリング」は、現在では大規模なシステムにおける可用性向上の手法のひとつとして確立し、広く知られるようになりました。 そのカオスエンジニアリングという手法を定義したのが、元Netflixカオスエンジニアリングチームのエンジニアリングマネージャーを務めていたCasey Rosenthal（ケイシー ローゼンタール）氏です。 そのローゼンタール氏が、ソフトウェアのテストに関わる国内最大のイベント「ソフトウェアテストシンポジウム 2023 東京」（JaSST'23 Tokyo）の基調講演に登壇し、「Chaos Engineering to Continuous Verification」（カオスエンジニアリングから継続
Mailosaurでメール送信のE2Eテスト - febc技術メモ
最近MailosaurというSaaSを使ってメール送信機能をテストしてみましたので、備忘がてら紹介メモを残しておきます。 Mailosaurとは? Mailosaurとは Email and SMS testing platformだそうです。 mailosaur.com メールがちゃんと送れているか?だとかメール本文/添付ファイルなどは意図通りか?をテストするのに便利な機能が提供されています。 Mailosaurってなんて読むの? 以下の動画をみたところ、カタカナだと「メイラソー」のように呼ばれていました。 www.youtube.com どんなことができるの? EメールやSMS関連のテストを行うための様々な便利機能が提供されています。 詳細は以下のドキュメントに記載されています。 mailosaur.com 例えばEメール関連ですと以下のような機能が提供されています。(上位プランのみの
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
Testing Frameworks for Javascript | Write, Run, Debug | Cypress
design-system assets cypress e2eAuthentication.cy.ts src componentsButton.cy.tsxButton.tsx describe('Auth', () => { it('user should be able to log in', () => { cy.visit('/') // open the login modal cy.get('button').contains('Login').click() // fill in the form cy.get('input[type="email"]').type('[email protected]') cy.get('input[type="password"]').type('test123') // submit the form
Playwright
Playwright enables reliable end-to-end testing for modern web apps. Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. Test Mobile Web. Native mobile emulation of Google C
Integrated testing with Prisma
Photo by Lukas Tennie from unsplash はじめにおしごとにて Prisma ORM を使った Node.js + TypeScript なバックエンドサービスを開発・運用しています。 Prisma を利用する上で、テストの書きづらさがあったため、OSS を 2 つほど作って改善しました。今回のエントリでは、この 2 つの npm パッケージを中心に、Prisma のテスト周りについて書いていきます。 https://github.com/Quramy/jest-prisma : 実 DB を使ったテストを書きやすくするためのツールhttps://github.com/Quramy/prisma-fabbrica : テストデータのセットアップを書きやすくするためのツールどちらについても、無いからと言って Prisma を利用したアプリケーションのロジックがテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実録レガシーコード改善 / Working with Legacy Code: the True Record
GitHub - Quramy/prisma-fabbrica: Prisma generator to define model factory
webフロントエンドテストと自動化
デブサミ2023 / テストを学びたい開発者のためのソフトウェアテスト読書マップ / Software Testing Reading Map for Developers
[Developers Summit 2023] ソフトウェアテスト新時代の幕開け: 機械学習とデータサイエンスで実現するテスト運用の高度化![[Developers Summit 2023] ソフトウェアテスト新時代の幕開け: 機械学習とデータサイエンスで実現するテスト運用の高度化](https://cdn-ak-scissors.b.st-hatena.com/image/square/0efe72a56b9d43a41e40530a646876ce37b6a9d5/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F2037a09e17cf4398ab0006d4fcfea1f9%2Fslide_0.jpg%3F24408296)
Testing Library | Testing Library
