如何使用TestCafe在Chrome中为Angular15页面URL创建书签并重新打开

TestCafe本身没有直接操作浏览器书签栏的API，但书签的核心就是存储目标URL，所以我们可以通过获取并保存页面URL来模拟“添加书签”的行为，后续直接访问该URL即可模拟打开书签的操作。下面是针对你的测试场景的完整实现步骤：

1. 前置准备 #

• 确保已全局安装TestCafe：npm install -g testcafe
• 熟悉你的Angular 15应用的登录流程、权限管理页面元素定位，以及无权限时的页面提示内容

2. 完整测试代码实现 #

import { Selector } from 'testcafe';

// 定义测试夹具，指定登录页作为起始页
fixture`报表书签权限控制验证`
    .page`https://localhost:4200/login`;

test('验证无权限时书签访问被拒绝', async t => {
    // 步骤1：登录测试用户
    await t
        .typeText(Selector('#username'), 'test-user') // 替换为你的用户名输入框选择器
        .typeText(Selector('#password'), 'test-password') // 替换为你的密码输入框选择器
        .click(Selector('#submit-login')); // 替换为你的登录按钮选择器

    // 步骤2：导航到目标报表页面，保存URL作为书签
    const targetReportUrl = 'https://localhost:4200/cc/dashboard/8155fc36-1111-4ad4-ab11-1331e756ef33/view';
    await t.navigateTo(targetReportUrl);
    
    // 保存当前页面URL（模拟添加书签的操作）
    const bookmarkedUrl = await t.eval(() => window.location.href);

    // 步骤3：修改用户权限，移除该报表的查看权限
    await t.navigateTo('https://localhost:4200/cc/user-permissions'); // 替换为你的权限管理页面URL
    // 假设权限开关是复选框，取消勾选对应报表的权限
    await t.click(Selector('#dashboard-8155fc36-1111-4ad4-ab11-1331e756ef33'));
    await t.click(Selector('#save-permission-changes')); // 替换为你的保存按钮选择器

    // 步骤4：打开已保存的书签URL，验证访问被拒绝
    await t.navigateTo(bookmarkedUrl);

    // 断言验证：检查页面是否显示无权限提示
    const accessDeniedMsg = Selector('.access-denied'); // 替换为你的无权限提示元素选择器
    await t
        .expect(accessDeniedMsg.exists).ok('未显示无权限提示')
        .expect(accessDeniedMsg.textContent).contains('您无权访问此报表', '提示文本不符合预期');
});

3. 关键细节说明 #

• 模拟书签逻辑：浏览器书签本质就是存储URL，所以通过window.location.href获取并保存URL的方式，完全等价于手动添加书签的效果，后续直接访问该URL就是打开书签的操作。
• 权限调整适配：代码中的权限修改部分是示例，你需要根据Angular应用中权限管理的实际UI结构，调整元素选择器和操作步骤（比如有的系统是通过下拉菜单、按钮来修改权限）。
• 断言准确性：请确保断言的元素或文本是你的应用在用户无权限时实际渲染的内容，比如403页面的标题、提示文案等。

内容的提问来源于stack exchange，提问作者Mukesh