如何在TestCafe及TestCafe Studio的已有窗口中打开页面？

一、TestCafe代码测试实现方式 #

默认触发新窗口打开的场景大多是元素带有target="_blank"属性，或者跳转逻辑强制开新窗口，以下两种方式可实现当前窗口打开：

1. 修改元素属性后操作 #

如果触发跳转的元素（如按钮A）带有target="_blank"，先修改属性为_self再点击：

import { Selector } from 'testcafe';

fixture `当前窗口打开页面测试`
    .page `你的测试起始页面地址`;

test('完整测试流程', async t => {
    // 步骤1：执行测试1的逻辑
    await t.run(() => { /* 替换为你的测试1代码 */ });
    
    // 步骤2：修改按钮A的target属性，再点击
    const buttonA = Selector('按钮A的CSS选择器');
    await t
        .eval(() => document.querySelector('按钮A的CSS选择器').setAttribute('target', '_self'))
        .click(buttonA);
    
    // 步骤3：页面已在当前窗口打开，可直接验证新页面元素
    await t.expect(Selector('新页面标识元素的选择器').exists).ok();
});

2. 直接导航到目标URL #

若已知按钮A跳转的目标地址，可跳过点击操作，直接在当前窗口导航：

import { Selector } from 'testcafe';

fixture `当前窗口打开页面测试`
    .page `你的测试起始页面地址`;

test('完整测试流程', async t => {
    // 步骤1：执行测试1的逻辑
    await t.run(() => { /* 替换为你的测试1代码 */ });
    
    // 步骤2：若不需要按钮A的其他触发逻辑，可省略此步
    // await t.click(Selector('按钮A的CSS选择器'));
    
    // 步骤3：直接在当前窗口跳转至目标页面
    await t.navigateTo('按钮A指向的目标URL');
});

二、TestCafe Studio无代码测试实现方式 #

方法1：修改元素属性后点击 #

1. 打开你的TestCafe Studio测试项目，定位到点击按钮A的步骤
2. 在该步骤之前添加「Run Client Script」步骤
3. 在脚本输入框中填入：

document.querySelector('按钮A的CSS选择器').setAttribute('target', '_self');

4. 保存后执行测试，点击按钮A时页面会在当前窗口打开

方法2：添加直接导航步骤 #

1. 若无需触发按钮A的额外业务逻辑，可跳过点击按钮A的步骤
2. 在测试流程中添加「Navigate To」步骤
3. 在步骤的URL输入框中填写按钮A对应的目标页面地址
4. 执行测试，页面将直接在当前窗口跳转

内容的提问来源于stack exchange，提问作者김철수