【人形遣いベースのフロントエンドの自動化フレームワーク] [2] POモード、アサーション（テストコードを作成する方法の論理容易）

I.概要

フロント人形遣い+冗談+活字体でUIの自動化を行う導入が、この知識ベース、我々は、そのようなので、上の設定ファイルは、そのようなアサーションとして、考慮されるために、このようなPOモードの自動化など、多くのことを達成しました。ここで叶うすることだ、私は人形遣いUIオートメーションを行うために使用される方法です

第二に、アサーション

（A）のインストールパッケージに依存する必要性

依存関係	コマンド
あり	ASLインストール--save-devのです
@タイプ/ A	NPM --save-devの種類/冗談@インストール
期待して、人形遣い	NPMインストール--save-DEV-人形遣いを期待
@タイプ/予想し、人形遣い	--save-devの種類/期待-人形遣い@ NPMをインストール

==知っている私たちは、アサーションと冗談冗談自分自身を書いたが、時には不完全な冗談アサーションは私たちを満たしていてもよく、我々は期待して、人形遣い== APIを見てみましょう

リンク：期待-人形遣い（API）

（B）簡単な紹介のAPI

APIの導入を参照してください、期待-人形遣い）はtoMathcElement（（検証ページを要素に合わせることができるかどうか、（それが値と一致することができるかどうかを確認するページ）などの主張toMatchとして私たちに利用可能な方法の一部をカプセル化し、両方まだ比較的使いやすいです特定の戦闘以外に特にtoMathcElement、
他のAPI、方法がクリックすると、人形遣いのAPIと異なる小さな人形を見てそれがどのような利点です-人形遣いを期待しますか？私たちは、ソースコードを見ていきます。この時間は==それも、既存のライブラリで、私たちは==ソースを見ることがたくさんあることをお勧めします
ビュー期待-人形遣い - すべての私たちのAPIを持つことになり、ここでExpectPuppeteerインターフェイス、我々はJSファイルを参照するために、任意のポイントを見る方法、ディレクトリ（ - libに - 期待-人形遣いをoptions.js）書かれたindex.d.ts、私たちは、この文書を見てみましょう、それは問題ではありません理解していないが、私たちは、おそらく推測することができ、あまりにも面倒ではありません）実行時の事、ケースはWAITFOR（の多くを書くことができ、実際の作業を制御することがあるので、私はそれことを示唆していますoptions.jsタイムアウトは、より正確なページ要素を見つけるために長いので、簡単設定します
API比較的簡単になりますAPIドキュメントによると、やって多くを紹介します

options.js -> 修改timeout为2s
let defaultOptionsValue = {
  timeout: 2000
};

三、POモード

Q：POモードとは何ですか？

：自己百度の概念は、私は、私は少しのUIオートメーションが書いたと思う、くっつかないと言って人気の、多かれ少なかれ少し理解することができるはず、私たちは、別途要素法、テストケースを記述するので、管理するために私たちを助けます、ロジックが明確で呼び出すことはありません、説明するために、以下の具体例を取ります

（サイトへの例と同様）第四に、例えば、

今日はly.comに自宅から、書く、格安航空券をクリックしてください - 国内線 - 航空デフォルト爆弾ボックスを確認します

（A）私のスクリプトディレクトリ

-----__tests__
-------ui
--------DomesticTictet
-------- cases
--------   basic.test.ts
-------- element
--------Index
-------- action
--------   Navi.action.help.ts   
-------- element
--------   Navigation.help.ts
-----env
------ ly.yaml
-----utils
------ config.js

テストケースは、それぞれ__tests__フォルダ、DomesticTictet、ファイルフォルダ異なるモジュールのインデックス、ケース（テストケースファイル格納フォルダ）要素（管理ページ要素）アクション（メソッド）であります
ENVファイル、管理YAMLファイル、およびすべてのファイルは、ここでYAMLを置い
utilsの独自のツールを作成し、config.jsのはYAMLファイルを読み込みます

（B）要素管理クラス

Navigation.help.ts

import { Page } from 'puppeteer';
import expectPuppeteer = require('expect-puppeteer');
export const Nav_Ticket = '#menuNav li:nth-child(3) b';
export const DomesticTicket = '.submenu-nav .flight-submenu1';

home.help.ts 
// 标题名
export const titleContent = '.s-title.dflex span';

// 出发城市
export const start_city_input = '.s-box:nth-child(1) input[value]';

// 到达城市
export const arrive_city_input = '.s-box:nth-child(3) input[value]';

// 出发时间
export const start_data_input = 'input[placeholder="出发日期"]';

// 到达时间
export const return_data_input = 'input[placeholder="返回日期"]';

// 搜索按钮
export const domestic_tictet_search = '.s-button';

// 搜索不到航班信息提示
export const flight_no_data_tip = '.flight-no-data span'

// 存在航班的元素 
export const flight_get_data = '.top-flight-info span b'

（C）アクションメソッドを書きます

Navi.action.help.ts

import { Page } from 'puppeteer';
import expectPuppeteer = require('expect-puppeteer');
const navi_element = require('../element/Navigation.help');

export class Navi_Action {
    /**
     * 点击国内机票
     */
    public async hover_home_ticket(page:Page) {
        await page.waitForSelector(navi_element.Nav_Ticket);
        await page.hover(navi_element.Nav_Ticket);
        await page.waitFor(3000);
        await expectPuppeteer(page).toClick(navi_element.DomesticTicket);
        await page.waitFor(3000);

    }
}

書き込み（4）YAMLプロフィール

ly.yaml

url:
  web: https://www.ly.com/
  flighthome: https://www.ly.com/flights/home

# puppeteer lanuch配置
puppeteer:
  proxy:
  viewport:
    width: 1920
    height: 1080

書かれた（e）のテスト

basic.test.ts

import { Page } from 'puppeteer';
import { Navi_Action } from '../../Index/action/Navi.action.help';
const config = require('../../../../utils/config');
const Home_Element = require('../element/home.help');
const time = require('silly-datetime');

const ly = config.readConfig('ly');

describe('domestic ticket page content verification', () => {
    let page : Page;
    beforeEach( async () => {
        page = await browser.newPage();
        await page.setViewport(ly.puppeteer.viewport);
        await page.goto(ly.url.web,{waitUntil:'networkidle2'});

        let navi_action = new Navi_Action();
        await navi_action.hover_home_ticket(page);
        
    },30000)
    afterEach ( async () => {
        await page.close();
    })

    test('TEST_001:验证跳转链接' , async() => {
        const url = await page.url();
        await expect(url).toBe(ly.url.flighthome);
    },30000);


    test('TEST_002:验证标题名' , async() => {
        const titleElement = Home_Element.titleContent;
        const content = await page.evaluate( (titleElement) => {
            return document.querySelector(titleElement).innerHTML;
        },titleElement);
        await expect(content).toEqual('国内机票');
    },30000);

    test('TEST_003:验证出发默认城市' , async() => {
        const content = await page.$eval(Home_Element.start_city_input,el => el.getAttribute('value'));
        await expect(content).toEqual('上海');
    },30000);

    test('TEST_004:验证到达默认城市' , async() => {
        const content = await page.$eval(Home_Element.arrive_city_input,el => el.getAttribute('value'));
        await expect(content).toEqual('北京');
    },30000);

    test('TEST_004:验证时间为当天时间' , async() => {
        const current_time = time.format(new Date(),'YYYY-MM-DD');
        const start_time_element = Home_Element.start_data_input;
        const start_time_content = await page.evaluate( (start_time_element) => {
            return document.querySelector(start_time_element).value;
        },start_time_element);
        await expect(start_time_content).toEqual(current_time);
    },30000);

    test('TEST_005:验证到达默认值' , async() => {
        const return_input = await page.$eval(Home_Element.return_data_input,el => el.getAttribute('placeholder'));
        await expect(return_input).toEqual('返回日期');
    },30000);
})

結果