preface

This article follows the previous one to introduce some advanced operations of TestCafe page interaction.
1, Mouse drag
1. Drag element offset
Method: t.drag can offset and drag the element relative to the original position.
case
import { Selector } from 'testcafe';

fixture element drag

.page `https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable`;

test('Drag test', async t => {

await t
    .switchToIframe('#iframeResult')
    // Drag 360 pixels on the x axis relative to the original position of the element
    .drag('#draggable', 360, 0);

});
2. Drag an element to another element location
Method: dragToElement drag an element to the location of another element.
case
import { Selector } from 'testcafe';

fixture element drag

.page `https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable`;

test('Drag test', async t => {

await t
    .switchToIframe('#iframeResult')
    // Drag the element #draggable into #droppable
    .dragToElement('#draggable', '#droppable')

});
2, File upload
1. Upload file
Method: t.setFilesToUpload:
Parameters:
parameter
describe
selector
Target element (the target element must be an input tag with a type="file" attribute.)
filePath
Path of uploaded files (multiple file uploads are supported, and parameters are passed in the form of array)
case

fixture My fixture

.page `https://www.layui.com/demo/upload.html`;

test('Uploading', async t => {

await t
    // Upload file
    .setFilesToUpload('#test2+input', [
        'C:\\Courseware\\images\\p5_1_1.png',
        'C:\\Courseware\\images\\p5_1.png'
    ])

});
2. Clear uploaded files
2. Clear uploaded files
Method: t.clearUpload delete the selected uploaded file in the file upload element
case
fixture My fixture

.page `https://www.layui.com/demo/upload.html`;

test('Uploading', async t => {

await t
    // Upload file
    .setFilesToUpload('#test2+input', [
        'C:\\Courseware\\images\\p5_1_1.png',

    ])
    .clearUpload("'#test2+input")

});
3, Screenshot operation
For screenshots, testsafe provides two methods: one is to take screenshots of the whole page, and the other is to take screenshots of a specific element.
1. Screenshot of the page
Method: t.takeScreenshot
Take a screenshot of the whole page, and the screenshot will be automatically saved to the directory of screenshot
Parameter Description:
Range
describe
Default value
path
The relative path and name of the screenshot file (not required).
fullPage
Specifies that the entire page should be captured, including content that cannot be seen due to overflow (not required).
false

example
import { Selector } from 'testcafe';

Screenshot of fixture page

.page `https://www.baidu.com`;

test('screenshot ', async t => {

await t
    .typeText('#kw ',' Lemon Cup ')
    .click('#su')
    .takeScreenshot({
        path: 'index_page.png',
        fullPage: true
    });

});
2. Element screenshot
Method: t.takeElementScreenshot()
Take a screenshot of the specific elements specified on the page
Parameter description
Range
describe
selector
Page elements of screenshots
path
The relative path and name of the screenshot file (not required).
options
Options to define how to take screenshots (not required). Please refer to the official documentation for details

example
import { Selector } from 'testcafe';

Screenshot of fixture page

.page `https://www.baidu.com`;

//Screenshot of Baidu home page search button
test('screenshot ', async t => {

await t
    .takeElementScreenshot('#su', 'su_ele.png');

});
4, Window scrolling
TestCafe operates on elements that are not visible at the bottom of the page and will automatically scroll to the element visible. Therefore, there is no special operation method to scroll the window in TestCafe. If you especially need to scroll to the page element without performing any operation on the element, you can use the client function constructor provided by TestCafe to define a scrolling method yourself.
1. Custom scrolling method
To customize the scrolling method, you need to use the constructor ClientFunction provided by TestCafe to create the client function.
The ClientFunction will be explained in detail in the following chapters. We can use it directly here
import { ClientFunction } from 'testcafe';

//Defines a method of scrolling relative to the current position
const scrollBy = ClientFunction((x,y) => {

window.scrollBy(x, y);

});

//Defines a method for scrolling to the specified pixel position on the page relative to the current position
const scrollTo = ClientFunction((x,y) => {

window.scrollTo(x, y);

});

fixture My fixture

.page `https://www.layui.com/demo/upload.html`;

test('Test scrollBy', async t => {

    // Scroll down 100 pixels relative to the current position
  await scrollBy(100,0);

});
test('Test scrollTo', async t => {

    //Scroll to the position where the X axis of the page is 1000 pixels
  await scrollTo(1000,0);

});
1
5, iframe switching
Like selenium, the test operation of TestCafe test is limited to the main window. If there is an iframe embedded page in the page, you should switch if there is an iframe during the automation test.
1. Switch to the specified iframe
The method switchToIframe in testsafe can help us switch from the main window to iframe
Method: switchToIframe
Example import {selector} from 'testsafe'; Fixture QQ email login iframe switch.page https://mail.qq.com/ ; Test ('iframe test ', async t = > {await T / / switch to iframe with id login_frame. switchToIframe('#login_frame ') / / enter account. Typetext (' #u ','1234567872') / / enter face. Typetext ('#p','123qwe ')};
2. Switch back to the page window from iframe
Method: switchToMainWindow()
example
import { Selector } from 'testcafe';

iframe switching of fixture qq mailbox login

.page `https://mail.qq.com/`;

test('iframe test', async t => {

await t
    //Switch to login with id_ iframe of frame
    .switchToIframe('#login_frame')
    // Enter account number
    .typeText('#u', '1234567872')
    // Input face
    .typeText('#p', '123qwe')

});

test('iframe test', async t => {

const mobile_ele = Selector('a').withText('Mobile version')
await t
    // Switch back to the original window
    .switchToMainWindow();
    // Click the mobile version in the window
    .click(mobile_ele)

});
1
6, Page access
In the previous sessions, we opened the pages in fixture, calling the page method. Then, if we want to jump to another specified page in the test case, we need to use the navigateTo method in TestCafe
Method: navigateTo
Access another page in the current window
case
fixture('Example').page('https://www.baidu.com');

test('Navigate To URL test', async t => {

await t.navigateTo('https://www.taobao.com');

});
7, Window switching
When TestCafe opens a new window, it will automatically switch to the new window. If we need to switch the window manually during the test,
1. Get window descriptor
Gets the window descriptor corresponding to the currently active window
method
example
import { Selector } from 'testcafe';

fixture Baidu test

.page `https://www.baidu.com`;

test('Wait test', async t => {

// Open a new window and receive the descriptor of the new window
await t.openWindow('http://www.taobao.com')
// Gets the descriptor of the current window
const new_desc = await t.getCurrentWindow();

});
2. Switch to a specific window
Method: t.switchToWindow
parameter

Parameter name
describe
windowDescriptor
Descriptor object obtained from an open browser window.

example
import { Selector } from 'testcafe';

fixture Baidu test

.page `https://www.baidu.com`;

test('Wait test', async t => {

// Gets the descriptor of the current window
const old_win = await t.getCurrentWindow();
// Open a new window 
const new_win = await t.openWindow('http://www.taobao.com')
// Switch to old window
t.switchToWindow(old_win) 
// Then switch to a new window
t.switchToWindow(new_win) 

});
3. Toggles the previous active window
Switch to the previous active window, and use this method call to cycle between the two nearest windows.
Method: t.switchToPreviousWindow
example
import { Selector } from 'testcafe';

fixture Baidu test

.page `https://www.baidu.com`;

test('Wait test', async t => {

// Open a new window and receive the descriptor of the new window
await t.openWindow('http://www.taobao.com')
// Switch to previous window
t.switchToPreviousWindow()
// Switch back
t.switchToPreviousWindow()
// Switch to previous window
t.switchToPreviousWindow()

});
4. Toggle parent window
Method: t.switchToParentWindow
example:
import { Selector } from 'testcafe';

fixture Baidu test

.page `https://www.baidu.com`;

test('Wait test', async t => {

// Open a new window and receive the descriptor of the new window
await t.openWindow('http://www.taobao.com')
// Switch to previous window
t.switchToParentWindow()

});
The following is some of the materials I used when studying. If you need them, you can click the link below to get them for free
[Test Architect] system junior test engineer - the way for test architects to learn