私がいた前に「リゼ-あなたはNode.jsのライブラリのシンプルでエレガントな使用の人形遣いを作ることができ、」紙は、単にリゼライブラリを導入しました。私は多くのガイダンスを与えていない、使用する方法については、単にライブラリ自体への導入でした。
この記事では、リゼE2EテストのUIテストや使用を行う方法について話しています。
リゼがトップレベルであると人形遣いで使用できるAPIライブラリに比較的チェーンの呼び出しを提供することができます：公式の開始前に、リゼは学生に簡単な紹介を与えるについて調べることがありません。現在、GitHubの中で開いて、アドレスhttps://github.com/g-plane/rize、スターへのGitHubに行くことを歓迎します。
インストール
最初は、リゼと人形遣いをインストールすることです。
あなたは糸を使用している場合：
$ yarn add --dev rize puppeteerあなたは、NPMを使用している場合：
$ npm install --save-dev rize puppeteerアカウントに、国内ネットワーク上の理由を取ると、あなたは国内のクロムミラーを使用する必要があります。
LinuxユーザやMacOSの場合：
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rizeWindowsユーザー：
SET PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize（NPMユーザー共感）
インストール人形遣いはクロムをダウンロードしますので、そのプロセス全体は、患者には時間がかかり、必要することができます。
約束
私たちは、ページは次のようにテストされることを前提としています。
<html>
<head>
<title>标题</title>
</head>
<body>
<div class="greeting">
Hello World!
</div>
<a href="">Another Page</a>
<button id="btn">Click Me</button>
<input type="checkbox" name="cb1" checked />
<input type="checkbox" name="cb2" />
</body>
</html>[スタート]書き込みテスト
最初にインポートされます。私たちは、ES2015輸入構文を使用することをお勧めします：
import Rize from 'rize'もちろん、あなたもCommonJSの方法を使用することができます。
const Rize = require('rize')まず最初に、リゼの例を構築することです。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
})
})そして、テストするページに移動します。私たちは、フロントページがで実行するように設定されていることを前提とHTTP：// localhostを：8000 /に、我々は次のことができます。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
})
})断言
アサーションページタイトル
我々は使用することができassertTitle、現在のページのタイトルを主張する方法を：
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
})
})アサーションテキスト
あなたは使用することができassertTitle、現在のページ指定されたテキストの存在を主張する方法を：
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
})
})我々はまた、明示的にちょうどCSSセレクタ缶の要素を考えると、要素内のテキストの存在を指定することができます。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
})
})指定されたクラス名の存在がアサート
私たちは、要素の指定は、クラス名があることを主張することができます。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
})
})また、指定されたクラス名が存在しないと主張することができます：
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
})
})アサーションフォーム状態
我々は、チェックボックスなどの状態フォームコントロールの一部、（チェックボックス）を選択または選択されていないと主張することができます。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
.assertChecked('[name="cb1"]') // 断言已选中
.assertNotChecked('[name="cb2"]') // 断言未选中
})
})ページと対話
実際のテストの間、我々はまた、ページと対話する必要があり、いくつかのアサーションを行う必要はありません。
例えば、我々は、上記の例のページを持って、我々はボタンをクリックすることができます：
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
.assertChecked('[name="cb1"]') // 断言已选中
.assertNotChecked('[name="cb2"]') // 断言未选中
.click('#btn')
})
})あなたは、リンクをクリックすることができ、私たちは、このリンク上のテキストを与える必要があります。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
.assertChecked('[name="cb1"]') // 断言已选中
.assertNotChecked('[name="cb2"]') // 断言未选中
.click('#btn')
.clickLink('Another Page')
})
})もちろん、我々は、フォームと対話することができます。例えば、チェックボックス：
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
.assertChecked('[name="cb1"]') // 断言已选中
.assertNotChecked('[name="cb2"]') // 断言未选中
.click('#btn')
.clickLink('Another Page')
.check('[name="cb2"]')
})
})またはチェックボックスをオフにします。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
.assertChecked('[name="cb1"]') // 断言已选中
.assertNotChecked('[name="cb2"]') // 断言未选中
.click('#btn')
.clickLink('Another Page')
.check('[name="cb2"]')
.uncheck('[name="cb1"]')
})
})ブラウザを閉じます
すべての作業が完了したら、ブラウザを終了する必要があります。
describe('UI test', () => {
it('example test', async () => {
const rize = new Rize()
rize
.goto('http://localhost:8000/')
.assertTitle('标题')
.assertSee('Hello World!')
.assertSeeIn('.greeting', 'Hello World!')
.assertClassHas('div', 'greeting')
.assertClassMissing('div', 'greet')
.assertChecked('[name="cb1"]') // 断言已选中
.assertNotChecked('[name="cb2"]') // 断言未选中
.click('#btn')
.clickLink('Another Page')
.check('[name="cb2"]')
.uncheck('[name="cb1"]')
await rize.end()
})
})もっと
実際にはリゼはるか機能のみ上記。より多くの情報を取得したい、あなたは以下のページを訪問することができます：
リゼのGitHubのリポジトリ：https://github.com/g-plane/rize（歓迎スター）
リゼの文書チュートリアル：https://rize.js.org/
RizeのすべてのAPIリファレンス：https://rize.js.org/api/classes/_index_.rize.html