TestCafe Studio如何跨fixture导入selector等资源及使用Page Model？

1. 跨fixture复用单个fixture内定义的selector、函数、自定义脚本 #

fixture内直接定义的变量、方法默认仅属于当前fixture作用域，无法直接被其他fixture访问，要实现复用可以采用以下两种方案：

• 把需要复用的内容抽为独立公共脚本：在TestCafe Studio项目的Scripts目录下新建.js/.ts文件，将selector、通用函数写入文件后用export语法导出，需要使用的fixture在文件顶部用import语法引入即可。
  示例公共脚本common-utils.js内容：

  import { Selector } from 'testcafe';
  // 导出公共选择器
  export const submitBtn = Selector('#submit-form');
  // 导出公共工具函数
  export function formatTimeStamp (raw) {
    return new Date(raw).toLocaleString()
  }
  

  目标fixture引入方式：

  import { submitBtn, formatTimeStamp } from '../Scripts/common-utils.js';
  

• 可视化模式下可以将公共脚本添加到项目的「Global Scripts」配置中，添加后脚本内导出的内容会全局生效，所有fixture无需手动引入即可直接调用。

2. 单条测试用例内定义的selector/函数的可访问范围 #

单条测试用例（即test()代码块内）定义的变量、方法都属于块级作用域，默认完全无法被外部访问，哪怕是同一个fixture下的其他测试用例也无法调用。
如果需要复用这部分逻辑，只能将对应代码抽离到公共脚本文件中导出，再在需要使用的位置引入调用。

3. Page Model模式实现方案 #

TestCafe原生支持Page Model模式，具体实现步骤如下：

• 项目内新建专门的Page Model存储目录，比如page-models，每个业务页面对应单独的模型文件，例如login-page.js
• 在页面模型文件中定义页面对应的所有selector和操作方法，导出实例化的页面对象即可，示例：

  import { Selector, t } from 'testcafe';
  class LoginPage {
    constructor () {
      // 定义页面元素选择器
      this.usernameInput = Selector('#account');
      this.passwordInput = Selector('#pwd');
      this.confirmLoginBtn = Selector('button.login-submit');
    }
    // 定义页面通用操作方法
    async autoLogin (account, password) {
      await t
        .typeText(this.usernameInput, account)
        .typeText(this.passwordInput, password)
        .click(this.confirmLoginBtn);
    }
  }
  export default new LoginPage();
  

• 在测试用例内引入页面对象后直接调用即可，示例：

  import LoginPage from '../page-models/login-page.js';
  fixture`登录模块测试`
    .page`https://你的测试站点域名/login`;
  test('合法账号可正常登录', async t => {
    await LoginPage.autoLogin('test001', 'test@pass123');
    await t.expect(Selector('.user-center-entrance').exists).ok();
  });
  

如果使用TestCafe Studio可视化编辑器，将Page Model文件放入项目Scripts目录后，在录制、编辑测试步骤时，可直接在表达式编辑器中调用Page Model内定义的selector和方法。

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