e2eのテスティングフレームワークCypressを導入しました | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
4 ソースコード例 会社名、代表者名、都道府県、取引状況を入力し登録するという簡単な入力フォームでテストします。テストコードでは登録ボタン押下後に各入力フォームがクリアになり、メッセージに「登録ありがとうございました」が表示されることを確認します。テスト対象のhtmlとJavascriptはvueとbootstrapで簡単に作ってあります。 ■ html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cypress Test</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/F
![e2eのテスティングフレームワークCypressを導入しました | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2008c179761656044b7d368c2d904353133ce24/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2021%2F02%2Fcypress_open.png)
パフォーマンスにおける無駄 · Webフロントエンド パフォーマンス改善ハンドブック
無駄のタイプ 現状の機能やUIを維持しながら、パフォーマンスを良くすることは無駄を削ることとほぼ同義です。 生放送の視聴ページに関する無駄を削っていくことがパフォーマンスの向上につながります。 その"無駄"には幾つかの種類があると考えられます。 無駄の種類 ブラウザにはI/Oなどはないため主に次の要素が挙げられます。 ネットワーク レンダリング スクリプティング これはブラウザの開発者ツールのTimelineやNetworkパネルなどでみれます。 これらについては次のサイトや書籍が参考になります。 参考 Chrome DevTools | Tools for Web Developers | Google Developers 開発ツール | MDN 超速！ Webページ速度改善ガイド Webフロントエンド ハイパフォーマンス チューニング Chrome Developer Toolsでパ
Page Object Patternを使うな、というCypress公式記事を読んで思ったこと - Qiita
※この記事はただの集団 Advent Calendar 2019の11日目の記事です。 はじめに 若干過激なタイトルにしたことを最初にお詫びします。 正確には以下の記事を読んで思ったことです。 Stop using Page Objects and Start using App Actions Page Objectsを使うのはやめて、App Actionsを使おう （著者訳） 引用元はCypressの公式ブログです。 全編英語なので、「読むの面倒くさいよぅ」という方には、本記事が内容理解に役立つかもしれません。 Summary 1.前提 2.Page Object Pattern推奨派の主張 3.Page Object Pattern否定派の主張 4.記事を読んで思ったこと 5.最後に 説明の都合上、まずPage Object Pattern推奨派の考え方を簡単に説明し、その後にPag
Cypressで送る快適E2Eライフ - Qiita
はじめに こんにちは、 SmartHR Advent Calendar 15日目の @aomoriringo です。 SmartHRのQAグループでSET(Software Engineer in Test)として働いています。 SETとしては1人目として入社したため、その時点ではE2Eテスト自体が存在していませんでした。 現在はCypressでのE2Eテストに取り組んでおり、これまでに溜まった知見をご紹介したいと思います。 E2Eテストの位置付け SmartHR Advent Calendar 2日目で、 wata727さんが Capybaraによるテストの話を書いてくれています。 Capybaraでブラウザを介したテストコードを書いているのに、それとは別になぜCypressによるテストを書く必要があるのでしょうか? ここで、「テストから見えてくるグーグルのソフトウェア開発」に出てくる
Cypressテストコードまとめ - Qiita
Cypressリンク 公式Doc https://docs.cypress.io/guides/overview/why-cypress.html chromeプラグイン Cypress Scenario Recorder 以下の記載は 公式のAPIページから引用したものです。そちらを参照するとより詳細な情報が見れます。 https://docs.cypress.io/api/api/table-of-contents.html Cypress Commands Visit a page describe('My First Test', function() { it('Visits the Kitchen Sink', function() { cy.visit('https://example.cypress.io') }) }) cy.contains('type') cy.get
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
E2Eテストフレームワーク Cypress の運用Tips - Qiita