♥ Prólogo
En este artículo [Web Automation Artifact TestCafe - Operaciones básicas de la página], presentamos algunos usos básicos de la interacción de la página TestCafe.
TestCafe de artefacto de automatización web: operaciones básicas de página
Este artículo sigue al anterior para presentar algunas operaciones avanzadas de interacción de la página TestCafe.
1. Arrastre del mouse
arrastrar el ratón arrastrar el ratón
1. Arrastre y suelte el desplazamiento del elemento
-
Método: t.arrastrar
可以将元素相对于原来位置进行偏移拖拽。-
el 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. Arrastre y suelte el elemento en otra posición del elemento.
-
Método: arrastrar al elemento
将元素拖拽到另一个元素的位置。-
el 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')
});Si desea aprender sobre pruebas automatizadas, aquí le recomiendo un conjunto de videos. Se puede decir que este video es el tutorial de pruebas automatizadas número uno en toda la red en la estación B. Al mismo tiempo, la cantidad de personas en línea ha aumentado. Llegó a 1000 y hay notas para recopilar y compartir con usted. Intercambio técnico de Dashen: 798478386 [Actualizado] Los tutoriales prácticos de prueba de automatización de interfaz Python más detallados de la estación B (la última versión del combate real)_哔哩哔哩_bilibili [ Actualizado] Las pruebas de automatización de la interfaz Python más detalladas de la estación B La colección completa de tutoriales de combate reales (la última versión del combate real) tiene un total de 200 videos, que incluyen: 1. ¿Por qué es necesario realizar la automatización de la interfaz?, pague atención a la cuenta UP. 
https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337.search-card.all.click
2. Carga de archivos
1. Subir archivos
-
Método: t.setFilesToUpload:
-
parámetro:
| parámetro | describir |
| selector | Elemento de destino (el elemento de destino debe ser una etiqueta de entrada con un atributo type="file"). |
| ruta de archivo | La ruta del archivo cargado (se admiten la carga de varios archivos y los parámetros se pasan en forma de matriz) |
-
el 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. Borrar archivos cargados
-
Método: t.clearUpload
Eliminar el archivo cargado seleccionado en el elemento de carga de archivos
-
el 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. Operación de captura de pantalla
Con respecto a las capturas de pantalla, testcafe proporciona dos métodos, uno es tomar una captura de pantalla de toda la página y el otro es tomar una captura de pantalla de un elemento específico.
1. Captura de pantalla de la página
-
Método: t.takeScreenshot
Tome una captura de pantalla de toda la página y las imágenes capturadas se guardarán automáticamente en el directorio de captura de pantalla.
-
Descripción de parámetros:
| alcance |
describir |
Valores predeterminados |
| camino |
Ruta relativa y nombre del archivo de captura de pantalla (opcional). |
|
| página completa |
Especifica que se debe capturar toda la página, incluido el contenido no visible debido al desbordamiento (opcional). |
FALSO |
-
ejemplo
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 pantalla del elemento
-
Método: t.takeElementScreenshot()
Tome capturas de pantalla de elementos específicos especificados en la página.
-
Descripción de parámetros
| alcance | describir |
| selector | Capturas de pantalla de elementos web. |
| camino | Ruta relativa y nombre del archivo de captura de pantalla (opcional). |
| opciones | Opción para definir cómo tomar una captura de pantalla (opcional). Para más detalles, consulte el documento oficial. |
(Documento oficial: https://testcafe.io/documentation/402676/reference/test-api/testcontroller/takeelementscreenshot?utm_source=testingpai.com)
El siguiente ejemplo demuestra cómo utilizar la acción t.takeElementScreenshot.
-
ejemplo
import { Selector } from 'testcafe';
fixture `页面截图`
.page `https://www.baidu.com`;
// 百度首页搜索按钮截图
test('screenshot ', async t => {
await t
.takeElementScreenshot('#su', 'su_ele.png');
});4. Desplazamiento de ventana
TestCafe opera con elementos invisibles en la parte inferior de la página y se desplazará automáticamente hasta que los elementos sean visibles. Por lo tanto, TestCafe no proporciona un método de operación dedicado para desplazar la ventana. Si necesita desplazarse particularmente hasta que el elemento de la página sea visible sin realizar ninguna operación en el elemento, puede usar el constructor de funciones del cliente ClientFunction proporcionado por TestCafe para definir un método de desplazamiento usted mismo.
1. Método de desplazamiento personalizado
El método de desplazamiento personalizado necesita utilizar el constructor ClientFunction proporcionado por TestCafe para crear una función de cliente.
Acerca de ClientFunction, los siguientes capítulos lo explicarán en detalle, aquí usamos directamente
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);
});
Cinco, cambio de iframe
La operación de prueba de TestCafe se limita a la ventana principal al igual que Selenium. Si hay una página incrustada con iframe en la página, en el proceso de prueba automatizada, si hay un iframe, se debe cambiar.
1. Cambie al iframe especificado
testcafe中的方法switchToIframe，可以帮我们从主窗口切换到iframe中-
Método: cambiar a Iframe
-
ejemplo
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. Vuelva a la ventana de la página desde el iframe.
-
Método: switchToMainWindow()
-
ejemplo
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. Acceso a la página
En el estudio de las secciones anteriores, abrimos la página en el dispositivo y llamamos al método de la página. Luego, si queremos saltar a otra página especificada en el caso de prueba, debemos usar el método navegarTo en TestCafe.
-
Método: navegar a
Visitar otra página en la ventana actual
-
el caso
fixture('Example').page('https://www.baidu.com');
test('Navigate To URL test', async t => {
await t.navigateTo('https://www.taobao.com');
});Siete, cambio de ventana
Cuando TestCafe abre una nueva ventana, cambiará automáticamente a la nueva ventana. Si necesitamos cambiar manualmente la ventana durante la prueba,
1. Obtenga el descriptor de la ventana.
获取当前活动窗口相对应的窗口描述符-
método
-
ejemplo
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. Cambiar a una ventana específica
-
Método: t.switchToWindow
-
parámetro
| nombre del parámetro | describir |
| descriptor de ventana | Un objeto descriptor obtenido de una ventana abierta del navegador. |
-
ejemplo
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. Cambie a la última ventana activa.
Cambie a la ventana activa anterior; con este método, la llamada al método recorrerá las dos ventanas más cercanas.
-
Método: t.switchToPreviousWindow
-
ejemplo
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. La ventana principal cambiada
-
Método: t.switchToParentWindow
-
ejemplo:
import { Selector } from 'testcafe';
fixture `百度测试`
.page `https://www.baidu.com`;
test('Wait test', async t => {
// 打开一个新窗口，接收新窗口的描述符
await t.openWindow('http://www.taobao.com')
// 切换到上一个窗口(就窗口)
t.switchToParentWindow()
});