Artefato de automação da Web TestCafe – operações avançadas de página

♥ Prefácio

Neste artigo [Web Automation Artifact TestCafe - Page Basic Operations], apresentamos alguns usos básicos da interação da página TestCafe

Artefato de automação da Web TestCafe – Operações básicas de página

Este artigo segue o anterior para apresentar algumas operações avançadas de interação da página TestCafe.

1. Arrastar o mouse

arrastar o mouse arrastar o mouse

1. Arraste e solte o deslocamento do elemento

Método: t.drag

可以将元素相对于原来位置进行偏移拖拽。

O caso

import { Selector } from 'testcafe';
fixture `元素拖拽`    .page `https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable`;
test('Drag test', async t => {    await t      .switchToIframe('#iframeResult')      // 相对于元素原来位置，x轴拖动360像素        .drag('#draggable', 360, 0);});

2. Arraste e solte o elemento em outra posição do elemento

Método: dragToElement

将元素拖拽到另一个元素的位置。

O caso

import { Selector } from 'testcafe';

fixture `元素拖拽`
    .page `https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable`;

test('Drag test', async t => {
    await t
      .switchToIframe('#iframeResult')
      // 将元素#draggable 拖动到 #droppable 中
        .dragToElement('#draggable', '#droppable')
});

Se você quiser aprender testes automatizados, recomendo aqui um conjunto de vídeos para você. Este vídeo pode ser considerado o tutorial de teste automatizado número um em toda a rede na estação B. Ao mesmo tempo, o número de pessoas online aumentou atingiu 1.000 e há notas para coletar e compartilhar com você.Troca técnica Dashen: 798478386 [Atualizado] Os tutoriais práticos de teste de automação de interface Python mais detalhados da estação B (a versão mais recente do combate real)_哔哩哔哩_bilibili [ Atualizado] O teste de automação de interface Python mais detalhado da estação B A coleção completa de tutoriais de combate reais (a versão mais recente do combate real) tem um total de 200 vídeos, incluindo: 1. Por que a automação de interface precisa ser feita? atenção à conta UP. https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337.search-card.all.click

2. Carregamento de arquivo

1. Carregar arquivos

Método: t.setFilesToUpload:
parâmetro:

parâmetro	descrever
seletor	Elemento de destino (o elemento de destino deve ser uma tag de entrada com um atributo type="file".)
caminho de arquivo	O caminho do arquivo enviado (são suportados vários uploads de arquivos e os parâmetros são passados na forma de uma matriz)

O caso

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

test('Uploading', async t => {
    await t
      // 上传文件
        .setFilesToUpload('#test2+input', [
            'C:\\课件\\images\\p5_1_1.png',
          'C:\\课件\\images\\p5_1.png'
        ])
});

2. Limpe os arquivos carregados

Método: t.clearUpload

Exclua o arquivo enviado selecionado no elemento de upload de arquivo

O caso

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

test('Uploading', async t => {
    await t
      // 上传文件
        .setFilesToUpload('#test2+input', [
            'C:\\课件\\images\\p5_1_1.png',

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

});

3. Operação de captura de tela

Em relação às capturas de tela, o testcafe oferece dois métodos, um é fazer uma captura de tela de toda a página e o outro é fazer uma captura de tela de um elemento específico.

1. Faça uma captura de tela da página

Método: t.takeScreenshot

Faça uma captura de tela da página inteira e as imagens capturadas serão salvas automaticamente no diretório de capturas de tela

Descrição do parâmetro:

escopo	descrever	Padrões
caminho	Caminho relativo e nome do arquivo de captura de tela (opcional).
página inteira	Especifica que toda a página deve ser capturada, incluindo o conteúdo não visível devido ao estouro (opcional).	falso

exemplo

import { Selector } from 'testcafe';

fixture `页面截图`
    .page `https://www.baidu.com`;

// 百度首页搜索柠檬班，然后整个页面截图
test('screenshot ', async t => {
    await t
        .typeText('#kw', '柠檬杯')
        .click('#su')
        .takeScreenshot({
            path: 'index_page.png',
            fullPage: true
        });
});

2. Captura de tela do elemento

Método: t.takeElementScreenshot()

Faça capturas de tela de elementos específicos especificados na página

Descrição do parâmetro

escopo	descrever
seletor	Capturas de tela de elementos da web
caminho	Caminho relativo e nome do arquivo de captura de tela (opcional).
opções	Opção para definir como fazer uma captura de tela (opcional). Para obter detalhes, consulte o documento oficial

(Documento oficial: https://testcafe.io/documentation/402676/reference/test-api/testcontroller/takeelementscreenshot?utm_source=testingpai.com)

O exemplo a seguir demonstra como usar a ação t.takeElementScreenshot.

exemplo

import { Selector } from 'testcafe';

fixture `页面截图`
    .page `https://www.baidu.com`;

// 百度首页搜索按钮截图
test('screenshot ', async t => {
    await t
        .takeElementScreenshot('#su', 'su_ele.png');

});

4. Rolagem de janela

TestCafe opera em elementos invisíveis na parte inferior da página e rolará automaticamente até que os elementos fiquem visíveis. Portanto, TestCafe não fornece um método de operação dedicado para rolar a janela. Se você precisar rolar até que o elemento da página fique visível sem realizar nenhuma operação no elemento, você poderá usar o construtor de função do cliente ClientFunction fornecido pelo TestCafe para definir você mesmo um método de rolagem.

1. Método de rolagem personalizado

O método de rolagem personalizada precisa usar o construtor ClientFunction fornecido pelo TestCafe para criar uma função cliente.

Sobre ClientFunction, os capítulos a seguir explicarão em detalhes, aqui usamos diretamente

import { ClientFunction } from 'testcafe';

// 定义一个相对当前位置，进行滚动的方法 
const scrollBy = ClientFunction((x,y) => {
    window.scrollBy(x, y);
});

// 定义一个相对当前位置，滚动到页面指定像素位置的方法 
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 => {
      // 相对当前位置，向下滚动100像素
      await scrollBy(100,0);
});
test('Test scrollTo', async t => {
      //滚动到页面X轴为1000像素的位置
      await scrollTo(1000,0);
});

5. troca de iframe

A operação de teste do teste TestCafe é limitada à janela principal, assim como o Selenium. Se houver uma página iframe incorporada na página, no processo de teste automatizado, se houver um iframe, ele deverá ser trocado.

1. Mude para o iframe especificado

testcafe中的方法switchToIframe，可以帮我们从主窗口切换到iframe中

Método: switchToIframe
exemplo

import { Selector } from 'testcafe';

fixture `qq邮箱登录之iframe切换`
    .page `https://mail.qq.com/`;

test('iframe test', async t => {
    await t
      //切换到id为login_frame的iframe中
        .switchToIframe('#login_frame')
      // 输入账号
      .typeText('#u', '1234567872')
      // 输入面面
      .typeText('#p', '123qwe')
});

2. Volte para a janela da página do iframe

Método: switchToMainWindow()
exemplo

import { Selector } from 'testcafe';

fixture `qq邮箱登录之iframe切换`
    .page `https://mail.qq.com/`;

test('iframe test', async t => {
    await t
      //切换到id为login_frame的iframe中
        .switchToIframe('#login_frame')
      // 输入账号
      .typeText('#u', '1234567872')
      // 输入面面
      .typeText('#p', '123qwe')
});

test('iframe test', async t => {
    const mobile_ele = Selector('a').withText('手机版')
    await t
      // 切换回原窗口
        .switchToMainWindow();
      // 点击窗口中的手机版
      .click(mobile_ele)
});

6. Acesso à página

No estudo das seções anteriores, abrimos a página no fixture e chamamos o método page. Então, se quisermos pular para outra página especificada no caso de teste, precisamos usar o método navigationTo em TestCafe

Método: navegarTo

Visite outra página na janela atual

O caso

fixture('Example').page('https://www.baidu.com');

test('Navigate To URL test', async t => {
    await t.navigateTo('https://www.taobao.com');
});

Sete, troca de janela

Quando TestCafe abre uma nova janela, ele muda automaticamente para a nova janela.Se precisarmos mudar manualmente a janela durante o teste,

1. Obtenha o descritor de janela

获取当前活动窗口相对应的窗口描述符

método
exemplo

import { Selector } from 'testcafe';

fixture `百度测试`
    .page `https://www.baidu.com`;

test('Wait test', async t => {
  // 打开一个新窗口，接收新窗口的描述符
    await t.openWindow('http://www.taobao.com')
    // 获取当前窗口的描述符
    const new_desc = await t.getCurrentWindow();
});

2. Mude para uma janela específica

Método: t.switchToWindow
parâmetro

nome do parâmetro	descrever
janelaDescriptor	Um objeto descritor obtido de uma janela aberta do navegador.

exemplo

import { Selector } from 'testcafe';

fixture `百度测试`
    .page `https://www.baidu.com`;

test('Wait test', async t => {
    // 获取当前窗口的描述符
    const old_win = await t.getCurrentWindow();
  // 打开一个新窗口 
    const new_win = await t.openWindow('http://www.taobao.com')
    // 切换到老窗口
    t.switchToWindow(old_win) 
    // 再切换到新窗口
    t.switchToWindow(new_win) 
});

3. Mude para a janela ativa anterior

Mude para a janela ativa anterior, usando este método a chamada do método percorrerá as duas janelas mais próximas.

Método: t.switchToPreviousWindow
exemplo

import { Selector } from 'testcafe';

fixture `百度测试`
    .page `https://www.baidu.com`;

test('Wait test', async t => {
  // 打开一个新窗口，接收新窗口的描述符
    await t.openWindow('http://www.taobao.com')
    // 切换到上一个窗口(就窗口)
    t.switchToPreviousWindow()
    // 切换回来
    t.switchToPreviousWindow()
    // 切换到上一个窗口
    t.switchToPreviousWindow()
});

4. A janela pai trocada

Método: t.switchToParentWindow
exemplo:

import { Selector } from 'testcafe';

fixture `百度测试`
    .page `https://www.baidu.com`;

test('Wait test', async t => {
  // 打开一个新窗口，接收新窗口的描述符
    await t.openWindow('http://www.taobao.com')
    // 切换到上一个窗口(就窗口)
    t.switchToParentWindow()
});

Artefato de automação da Web TestCafe – operações avançadas de página

♥ Prefácio

O caso

exemplo

Acho que você gosta