TestCafe自动化测试中API登录后UI登录无法触发角色模态框显示的问题排查求助

大家好，我最近在做TestCafe自动化测试时碰到了一个棘手的问题，折腾了好几天都没找到解决方案，想请教下各位有没有思路。

问题背景 #

我要复现的业务场景是：先通过API调用登录设备并选择对应角色（A或B），之后通过UI登录应用，此时页面应该弹出一个模态框，显示当前登录的角色是之前API选择的A或B。手动操作这个流程完全正常，但放到TestCafe自动化测试里，UI登录后模态框就是不出现——除非我在UI登录后执行页面刷新（await t.eval(() => location.reload());），模态框才会正常显示。

但问题是，我不能写一个“登录后没模态框，刷新才出来”的测试用例，这不符合业务预期的正常流程。我也试过在UI登录前先刷新页面（重新导航到登录页或者手动reload），再执行UI登录，结果还是看不到模态框。

已尝试的解决方案 #

我已经试过以下几种方法，都没解决问题：

• 在UI登录前重新导航到登录页面：await t.navigateTo(config.ui.loginUrl);
• 手动触发应用里的authStateChanged事件：await t.eval(() => window.dispatchEvent(new Event('authStateChanged')))
• 在API登录和UI登录之间添加5秒等待（不管是在上述操作前还是后加等待都试过）
• 打印页面innerHTML检查，发现模态框的HTML代码完全不存在，只有刷新页面后才会加载出来

代码示例 #

我的测试代码和API登录方法如下：

测试代码

['ROLE A', 'ROLE B'].forEach((account: string) => {
  test.only(`Validate application auto login with selected "${account}" role after role login in device`, async (t) => {
    // 创建设备并获取属性用于API登录
    sessionCreated = true;
    const device = await createDevice({
      venueId: '888001',
      accountType: account as ACCOUNT_TYPE,
      requireLogin: false,
      deviceIds: deviceIds,
      createdUsers: createdUsers,
    });

    // API登录并选择角色
    await apiLogin('test11', 'Test111', defaultDeviceHeaders(device), { selectedRole: account });

    // UI登录
    await login.login('test11', 'Test111');

    // 只有加了这行刷新，模态框才会出现，但这不是预期流程
    await t.eval(() => location.reload());

    // 验证模态框显示
    if (account === 'ROLE A') {
      await t
        .expect(roleSelection.roleAModalTitle.visible)
        .ok('Logged in as role A modal not visible', { timeout: 5000 });
    } else {
      await t
        .expect(roleSelection.roleBModalTitle.visible)
        .ok('Logged in as role B modal not visible', { timeout: 5000 });
    }
  });
});

API登录方法

export function apiLogin(
  username: string,
  password: string,
  headers?: {},
  query: { selectedRole?: string } = {},
) {
  return request(config.CONFIG.TOKEN_GENERATOR)
    .post(`/login`)
    .auth(username, password)
    .set(headers)
    .query(query);
}

求助方向 #

有没有大佬能指点下，在API登录和UI登录之间，还能做哪些操作来让UI登录后自动触发模态框的显示？比如有没有其他事件需要触发，或者TestCafe的API里有没有我没用到的方法可以强制同步页面状态？

内容来源于stack exchange