Testcafe's positioning, operation of page elements, and verification of execution results

location 、 Operate page elements

TestCafe use CSS Selector Locate page elements .CSS Selector Common ways to locate page elements are as follows 10 Ways of planting , Speak in front of the Cypress I mentioned when locating page elements ,Cypress It's actually using jquery Locate page elements . and CSS Selector and jquery similar .

TestCafe use CSS Selector location element, Just positioning element Some encapsulation was carried out when .

import { Selector } from 'testcafe';

const headerText = await Selector('#header').textContent;  
// lookup id=header Of element, And get the element Of innerText

const label= await Selector('.column.col-2 label')     
// obtain class=column and col Of element Under the <label> label element

await t.typeText('.column.col-2 label','text123')      
// adopt class location element Another way of writing , It's just that the writing method also includes the element Operation of entering text 

const label= await Selector('#tried-section').child('label')  
// obtain id=“tried-section” Inferior son element, Zygote element It's a <label>

 For simplicity , The following is only written Selector Chinese content 

Selector('ul').nth(2);  
// Choose the third ul element,nth(0) Represents the first 

Selector('div').nth(-1);  
// Choose the last div element

Selector('label').withText('foo');  
// choice label element, And the label Of innerText contain “foo”

Selector('div').withAttribute('attrName', 'foo');   
// choice div element, And the element Include the name “attrName” Properties of , The property value is equal to foo

await t.click('div[attrName="foo"]')  
// Locate by attribute value element Another way of writing , This writing method is consistent with the above effect , But the writing method also includes the right element Of click operation 

Selector('a').parent('div')  
// adopt parent Locate a element The father of element

Selector('nav').child('ul')  
// adopt child Locate a element The son of element

Selector('input').parent(0)  
// adopt 0,1,2 Wait to locate the parent element One of the element, In this way, you can understand , If there are other positioning methods , This is not recommended , Poor readability 

Selector('div').child(0)

Selector('ul').find('label').parent('div.someClass') 
// Cascade lookup , Used find location element after , Re pass parent perhaps child location find in element The father of element Or son element

const id = await Selector('ul').find('label').parent('div.someClass').nth(2).id;  
// Cascade lookup ,nth(2) Express , Found in the front elements No 3 individual element

Selector('.container').parent(1).nth(0).find('.content').withText('yo!').child('span'); 
// More complex cascade search 

  The above lists a variety of methods to locate page elements , Next, let's take a practical example . Here's how to open testcafe Its official website , Locate a through cascade operation button, And click this button, And the verification operation after clicking . Here is the positioning 、 Operate page elements demo Script , perform “npm run test:selectElement” You can run the following case script .

import { Selector } from 'testcafe';
test('My test', async t => {
    const macOSRadioButton = Selector('.column.col-2').find('label').child(el => el.value === 'MacOS');  
 // Actually, it can be achieved through id And other methods to locate the radio button , Here we mainly help you practice how to locate page elements through cascade query 
    
 //const macOSRadioButton = Selector('.column.col-2 label #macos');  
 // You can also use the above selector location 
    
 // const macOSRadioButton = Selector('#macos');   
 // You can also use id location 

    await t
        .click(macOSRadioButton.parent())  
        // Click this radio button

        .expect(macOSRadioButton.checked).ok(); 
        // Verify that the radio button is selected 
});

The use of testcafe How to locate and manipulate page elements when framing , Next, let's see how to verify the execution result .

Verify execution results

UI Layer automation testing mainly includes 8 Three verification scenarios , As shown below .

• obtain element Of innerText check
• obtain element Property value verification of
• Judge element Whether there is
• Judge whether the radio button is checked
• Judge whether the multi-choice button is checked
• Judge element Is it hidden
• Judge element Is it operational （disable perhaps enable）
• obtain element Check the number of

The use of testcafe How to complete the above in the framework 8 Three verification scenarios .

await t.expect(Selector('.className').count).eql(3);  
// Verify the location element Whether the number is equal to 3

await t.expect(Selector('.className').innerText).notEql('abc'); 
// Get a element Of innerText Not equal to a string 

await t.expect(Selector('#elementId').getAttribute('attr')).eql('abc') 
// Get a element Of attr Check the value of the property 

await t.expect(Selector('#elementId').exists).ok()  
// Check one element There is 

await t.expect(Selector('#elementId').exists).notOk() 
// Check one element non-existent 

await t.expect(Selector('button').hasAttribute('disabled')).ok()
// Check one element yes disable state 

await t.expect(await Selector('#elementId').visible).ok();
// Check one elment It's the visible state , namely document This element exists in the object , And not hidden 

await t.expect('#elementId').ok() 
// Verify whether a radio button or multiple-choice button is selected 

await t.expect('foo bar').contains('bar')  
// Check one element Of innerText Contains some characters 

await t.expect( 'foo bar' ).notContains( 'abc', 'this validation success')
// Check one element Of innerText Does not contain some characters , And if the verification is successful, the prompt message can be printed “this validation failed” 

await t .expect(‘#element’).typeOf('button') 
// Verify a element Is the type button

await t .expect(‘#element’).notTypeOf('input','this validation success')  
// Verify a element The type is not input, If the verification is successful, the following message

await t.expect(5).gt(2, '5 is greater than 2');  
//gt Indicates greater than the verification ,gte： Greater than or equal to ,lt： Less than ,lte： Less than or equal to 

The following case is to open testcafe An official one for practice web application , There are radio buttons inside 、 Multiple buttons 、 A drop-down box 、 Drag and so on , The following example is based on the above action and assert The way , Complete various applications for this element The operation of .

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

    await t.typeText('#main-form #developer-name', 'test user', {replace: true});
    // In the first input box, enter “test user”

    await t.setNativeDialogHandler(() => true)
        .click('#main-form #populate');  
    // If you click “populate” One will pop up dialog box , Here by calling setNativeDialogHandler() Close the dialog box , Solved because the pop-up dialog Box causes the test to fail         

    const myCheckBox = Selector('#main-form #remote-testing');
    await t.click(myCheckBox);
    await t.expect(myCheckBox.checked).ok();
    // Check the multi select button , And check whether it is checked 

    const myRadioButton = Selector('#main-form label').withText('Windows').child('input');
    await t.click(myRadioButton);
    await t.expect(myRadioButton.checked).ok();
    // Check the radio button , And check whether it is checked 

    const selectBoth = Selector('#preferred-interface').find('option').withText('Both');
    await t.click('#preferred-interface')
        .click(selectBoth);
    // Click on the drop-down list , And select something in the list     

    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);
   //  Drag interface element To fixed position , For such operations ,testcafe Provides friendly method support , As shown above , First, locate the target position of the drag element, And then call t.dragToElement The method can  

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

The previous case scripts are stored in “select_element_spec.js” In file , perform “npm run test:selectElement” You can run the above script . The results are shown in the following figure , You can see that it runs successfully , Description find 、 Operation and verification element All success , You can also do more exercises by yourself .