TestCafe之定位、操作页面元素以及验证执行结果

定位、操作页面元素

TestCafe采用CSS Selector定位页面元素。CSS Selector定位页面元素的方式常用的有以下10种方式,前面讲Cypress定位页面元素时提到过，Cypress实际是利用jquery定位页面元素。而CSS Selector和jquery类同。

TestCafe采用CSS Selector定位element，只是在定位element的时候进行了一些封装。

import { Selector } from 'testcafe';

const headerText = await Selector('#header').textContent;  
//查找id=header的element，并获取该element的innerText

const label= await Selector('.column.col-2 label')     
//获取class=column和col的element下的<label>标签element

await t.typeText('.column.col-2 label','text123')      
//通过class定位element的另外一种写法，只是该写法还包含了向该element输入文本的操作

const label= await Selector('#tried-section').child('label')  
//获取id=“tried-section”下的子element,且子element是一个<label>

为了简便，以下都只写Selector中内容

Selector('ul').nth(2);  
//选择第三个ul element，nth(0)表示第一个

Selector('div').nth(-1);  
//选择最后一个div element

Selector('label').withText('foo');  
//选择label element，且该label的innerText包含“foo”

Selector('div').withAttribute('attrName', 'foo');   
//选择div element，且该element包含名称为“attrName”的属性，属性值等于foo

await t.click('div[attrName="foo"]')  
//通过属性值定位element的另外一种写法，该写法与上面的效果一致，只是该写法还包含对element的click操作

Selector('a').parent('div')  
//通过parent定位某个element的父element

Selector('nav').child('ul')  
//通过child定位某个element的子element

Selector('input').parent(0)  
//通过0，1，2等定位父element中的某个element，此种方式可以了解，如果有其他定位方式，不推荐此种写法，可读性比较差

Selector('div').child(0)

Selector('ul').find('label').parent('div.someClass') 
//级连查找，使用了find定位element后，再通过parent或者child定位find中element的父element或者子element

const id = await Selector('ul').find('label').parent('div.someClass').nth(2).id;  
//级连查找，nth(2)表示，前面查找出来的elements中的第3个element

Selector('.container').parent(1).nth(0).find('.content').withText('yo!').child('span'); 
//更复杂的级连查找

 上面列举了多种定位页面元素方法，接下来看个实际的例子。以下是打开testcafe的官网，通过级连操作定位一个button，并点击该button，以及点击后的校验操作。下面是定位、操作页面元素demo脚本，执行“npm run test:selectElement”即可运行下面的案例脚本。

import { Selector } from 'testcafe';
test('My test', async t => {
    const macOSRadioButton = Selector('.column.col-2').find('label').child(el => el.value === 'MacOS');  
 //实际可以通过id等方式来定位该单选按钮，这里主要帮助大家练习如何通过级连查询定位页面元素
    
 //const macOSRadioButton = Selector('.column.col-2 label #macos');  
 //还可以通过上面的selector定位
    
 // const macOSRadioButton = Selector('#macos');   
 //还可以通过id定位

    await t
        .click(macOSRadioButton.parent())  
        //点击该radio button

        .expect(macOSRadioButton.checked).ok(); 
        //校验是否已选择该单选按钮
});

上面介绍了使用testcafe框架时如何定位和操作页面元素，接下来看看如何校验执行结果。

验证执行结果

UI层自动化测试中总结起来主要包含8种验证场景，如下所示。

• 获取element的innerText校验
• 获取element的属性值校验
• 判断element是否存在
• 判断单选按钮是否被勾选
• 判断多选按钮是否被勾选
• 判断element是否隐藏
• 判断element是否可操作（disable或者enable）
• 获取element的个数校验

下面列举了使用testcafe框架时如何完成上面8种验证场景。

await t.expect(Selector('.className').count).eql(3);  
//校验定位到的element个数是否等于3

await t.expect(Selector('.className').innerText).notEql('abc'); 
//获取某个element的innerText不等于某个字符串

await t.expect(Selector('#elementId').getAttribute('attr')).eql('abc') 
//获取某个element的attr属性的值进行校验

await t.expect(Selector('#elementId').exists).ok()  
//校验一个element存在

await t.expect(Selector('#elementId').exists).notOk() 
//校验一个element不存在

await t.expect(Selector('button').hasAttribute('disabled')).ok()
//校验一个element是disable状态

await t.expect(await Selector('#elementId').visible).ok();
//校验一个elment是可见状态，即document对象中存在此元素，且不是隐藏状态

await t.expect('#elementId').ok() 
//校验一个单选按钮或者多选按钮是否被选中

await t.expect('foo bar').contains('bar')  
//校验一个element的innerText包含某些字符

await t.expect( 'foo bar' ).notContains( 'abc', 'this validation success')
//校验一个element的innerText不包含某些字符，且如果校验成功能打印提示信息“this validation failed” 

await t .expect(‘#element’).typeOf('button') 
//校验某个element类型是否是button

await t .expect(‘#element’).notTypeOf('input','this validation success')  
//校验某个element类型不是input，如果校验成功显示后面的message

await t.expect(5).gt(2, '5 is greater than 2');  
//gt表示大于校验，gte：大于或等于，lt：小于，lte：小于或等于

下面的案例是打开testcafe官方提供的用于练习的一个web应用，里面有单选按钮、多选按钮、下拉框、拖动等操作，以下例子是利用上面列举的action和assert方式，完成对这个应用各种element的操作。

test('should control the test web application successfully', async () => {
    await t.navigateTo('https://devexpress.github.io/testcafe/example/'); 
    //打开应用

    await t.typeText('#main-form #developer-name', 'test user', {replace: true});
    //第一个输入框中输入“test user”

    await t.setNativeDialogHandler(() => true)
        .click('#main-form #populate');  
    //被测应用上如果点击“populate”会弹出一个dialog框，这里通过调用setNativeDialogHandler()关闭掉该dialog框，解决了因为弹出dialog框导致测试失败的问题        

    const myCheckBox = Selector('#main-form #remote-testing');
    await t.click(myCheckBox);
    await t.expect(myCheckBox.checked).ok();
    //勾选多选按钮，并校验是否被勾选

    const myRadioButton = Selector('#main-form label').withText('Windows').child('input');
    await t.click(myRadioButton);
    await t.expect(myRadioButton.checked).ok();
    //勾选单选按钮，并校验是否被勾选

    const selectBoth = Selector('#preferred-interface').find('option').withText('Both');
    await t.click('#preferred-interface')
        .click(selectBoth);
    //点击下拉列表，并选择列表中某个内容    

    await t.click('#tried-test-cafe');
    await t.expect(Selector('#tried-test-cafe').checked).ok();

    const toAreaElement = Selector('.slider-container .slider-value').withText('5');
    await t.dragToElement('.slider-container #slider span', toAreaElement);
   // 拖动界面element到固定位置，对于这类操作，testcafe提供了很友好的方法支持，如上所示，首先定位拖动的目标位置element，然后调用t.dragToElement方法即可 

    await t.typeText('#comments', 'this is a test', {replace: true})
});

前面的案例脚本都存放在“select_element_spec.js”文件中，执行“npm run test:selectElement”即可运行上述脚本。运行结果如下图所示，可以看到运行成功，说明查找、操作以及校验element全部成功，大家也可以自己动手做更多的练习。