![見出し画像](https://assets.st-note.com/production/uploads/images/44639182/rectangle_large_type_2_103d859d24d989bce38ee6cc75bbbe20.png?width=1200)
Angular/e2eテスト環境
E2Eテストシナリオ次第で検討。QA(Quality Assurance=品質保証)。
ロケータ :操作や検証の対象となる要素を指定するためのキー
パーソナルテスト環境の実装
・Cloud+Docker
・Jenkins+Docker
・CodeceptJS+Docker
// Locator Builderの例
// CSSセレクタやXPathだと複雑になりがちなロケータをシンプルに書ける
locate('a')
.withAttr({ href: '#' })
.inside(locate('label').withText('Hello'));
// Semantic Locatorの例
// 標準的なDOM構造のサイトであれば文言を指定するだけで操作できる
//
// "Sign in" ボタンをクリックし、
// "Username" フィールドに "tsuemura" と入力する
I.click('Sign in');
I.fillField('Username', 'tsuemura');
Thanks
・CodeceptJS
https://codecept.io/
https://qiita.com/clown0082/items/c76ecd1393bfdeb1e623
・Cloud+Docker(DockerでCFアプリをデプロイする)
https://qiita.com/MahoTakara/items/857e8ad96cd96d4053c6
・DockerとCodeceptJSで自動テスト
https://devlog.atlas.jp/2019/12/24/2998
・Autify
Google Chrome に Autify のプラグインをインストールする
テストしたいブラウザ操作を Autify のクラウドサーバーに記録
自動テスト実行はそのサーバー上のブラウザで行う。
実行サーバーの IP アドレスを固定するオプションを使う。
REST API 経由でテスト実行の命令が可能(CI/CD パイプラインのタスク)
https://www.creationline.com/lab/38202
https://blog.autify.com/ja/why-id-should-not-be-used
事例
https://techblog.zozo.com/entry/autify-introduction
3年前Selenium QA(Quality Assurance=品質保証)担当者
https://autify.com/ja/stories/robotpayment
フロントエンジニア、バックエンドエンジニア、UI/UXデザイナー、スクラムマスター、QA担当者、SREなど
環境
・ローカルネットワークのみからアクセス可能なウェブアプリケーション(アクセスにVPN接続が必須であるものを含む)はAutify利用できません。
・Jenkins+Docker
https://qiita.com/__init__/items/5c867eb8759b158aaf3f
・ cypress
https://www.akariinc.com/ja/blog/development/introduction-cypress
・2020トレンド
https://www.infoq.com/jp/articles/javascript-web-development-trends-2020/