TestCafe 快速上手 （三）

环境安装

node.js

项目结构

configuration file

简易配置：

{
    "src": "./testcase",
    "selectorTimeout": 180000,
    "pageLoadTimeout": 180000,
    "assertionTimeout": 180000,
    "speed": 1,
    "developmentMode": true,
    "concurrency": 1,
    "port1":1337,
    "port2": 1338,
    "skipJsErrors": true
}

configuration file 配置说明

page

不明白的 了解下page object。
简易demo 官方demo

class Page { 
 constructor () { 
     // 元素定位
     this.nameInput = Selector('#developer-name'); 
     this.triedTestCafeCheckbox = Selector('#tried-test-cafe'); 
     this.populateButton = Selector('#populate'); 
     this.submitButton = Selector('#submit-button'); 
     this.results = Selector('.result-content'); 
     this.commentsTextArea = Selector('#comments'); 
  }
  // 元素操作
  async submitName (name) { 
     await t 
     .typeText(this.nameInput, name) 
     .click(this.submitButton); 
  } 
}
export default new Page();

role

可以理解为 登录一次，获取cookie,后续调用role无需重复登录。
login.js

import { Selector, t } from "testcafe";
import * as myfixture from "../utils/myfixture";

class LoginPage {
	constructor () {
		this.accountInput = Selector("input[name='email']");
		this.passwordInput = Selector("input[name='password']");
		this.loginButton = Selector(".login-form").find("button");
	}

	async loginAccount(account,password) {
		await t
			.typeText(this.accountInput, account)
			.typeText(this.passwordInput, password)
			.click(this.loginButton)
			.wait(7000);
	}
}
export let loginPage = new LoginPage();

myrole.js

import { Role } from "testcafe";
import {loginPage} from "../page/login";
import * as help from "./helper";


export const userRole = Role(
	help.websiteUrl+help.urls["login"], 
	async () => {
		await loginPage.loginAccount(help.user["email"],help.user["password"]);
	});

testdata

测试数据与代码分离。官方demo
data.json

    {
        "first_name": "1uitest",
        "last_name": "1",
        "email":"uitest@g.com",
        "city": "1",
        "zip_code": "1",
        "address": "1",
        "phone_number": "1",
        "state": "1"
    }

index.js

export const addressData = require("../testdata/address_data.json");
class Address(){
        constructor () { ... }
        //填写地址信息
	async fillInAddress (addressData) {
		await t
        	      .expect(this.addressWrapperDialog.exists).ok()
              	      .typeText(this.firstNameInput,addressData["first_name"])
      		      .typeText(this.lastNameInput,addressData["last_name"])
      		      .typeText(this.emailInput,addressData["email"])
              	      .typeText(this.zipCodeInput,addressData["zip_code"])
              	      .typeText(this.stateInput,addressData["state"])
              	      .typeText(this.cityInput,addressData["city"])
		      .typeText(this.addressInput,addressData["address"]);
	}
}

fixture

测试前置后置操作：如打开浏览器，关闭浏览器，打开网站

async function openUrlFixture(isLogin,pageName){
	fixture `Open TestURL`
		.page `${websiteUrl}`
		.beforeEach( async t => {
			await t.maximizeWindow();
			if(isLogin){
				await t.useRole(userRole);
			}
			switch(pageName){
			case "shop":
				await shopPage.openShop();
				break;
			default:
				//do something
				
			}
			
		})
		.afterEach(async t=>{
			//do something
		});
}

export function openShopFixture(isLogin){
	openUrlFixture(isLogin,"shop");
}

testcase

import * as myfixture from "../utils/myfixture";

myfixture.openShopFixture(true);
test("测试用例1 - 登录", async t => { ... });

myfixture.openShopFixture();
test("测试用例2 - 不登陆", async t => { ... });

run test

import createTestCafe  from "testcafe";

(async function runTest(){
	const testcafe = await createTestCafe();
	const customeTime=()=>{
		var date = new Date();
		return date.getFullYear()+"_"+(date.getMonth()+1)+"_"+date.getDate()+"_"+date.getHours()+"_"+date.getMinutes()+"_"+date.getSeconds();
	};
	var a = customeTime();

	try {
		const runner = testcafe.createLiveModeRunner();

		const failedCount = await runner
			.browsers(["chrome"])
			.screenshots({
				path: "reports/"+a+"result/screenshots/",
				takeOnFails: true,
				pathPattern: "test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png"
			})
			.useProxy("localhost:8888") //开启fiddler监听
			.run({ 
				"debugMode": false
			});

		console.log("Tests failed: " + failedCount);
	}
	finally {
		await testcafe.close();
	}
}());

-----End-----