如何在 testcafe 中调用外部异步等待函数答案

【问题标题】：how to call external async await function in testcafe如何在 testcafe 中调用外部异步等待函数
【发布时间】：2018-12-19 12:59:11
【问题描述】：

我有helper.js，它的功能是

async function getLink() {
  try {
    const message = await authorize(content);
    const link = message.match(/href=\"(.*?)\"/i);
    return link[1];
  }
  catch(error) {
    console.log('Error loading:',+error);
    throw(error);
  }
}
module.exports.getLink = getLink;

我想在测试执行后在 testcafe 脚本中使用这个函数

在 test.spec.js 中

import { Selector } from 'testcafe';
let link = '';
fixture My fixture
.page `https://devexpress.github.io/testcafe/example/`;

 test('test1', async t => {

// do something with clientWidth
});
test('test2', async t => {
  // use the getLink function here from the helper.js to get the string value
  mailer.getLink().then(res=>{
    link = res;
  })
  t.navigateTo(link)
});

如何解决这个问题？

我尝试使用 clientFunction 但得到错误_ref is not defined 代码如下

const validationLink = ClientFunction(() => {
  return getLink();
}, { dependencies: { getLink } });
let link = await validationLink();

【问题讨论】：

用mailer.getLink().then(res=>{link = res;})代替link = await mailer.getLink();
等待没有用:(

标签： javascript automated-tests e2e-testing web-testing testcafe

【解决方案1】：

如果getLink 方法必须读取 DOM 中的某些内容（即超出 Selector 的范围）或必须在浏览器中计算某些特殊内容，则必须创建一个 clientFunction 如下所示（所有clientFunction 内的代码（无导入代码）：

const getLink = ClientFunction((selector) => {
    return new Promise( (resolve) => {
        const element = selector();
        // check, in developper tools, what are the available properties in element
        console.log("element:", element);
        // code omitted for brevity that reads data from element and does special computation from it
        // build the result to be returned
        const result = 'the computed link';
        resolve(result);
    });
});

test('test2', async t => {
  const linkSelector = Selector('css selector');
  const link = await getLink(inputSelector);
  await t.navigateTo(link);
});

如果getLink 方法不需要从DOM 中读取特殊内容，则无需创建clientFunction。您只需要创建一个辅助方法并导入它（如@AlexSkorkin 建议的那样）：

test('test2', async t => {
  const link = await mailer.getLink();
  await t.navigateTo(link)
});

请注意，必须等待 t.navigate() 和 mailer.getLink()。

【讨论】：

根据您的建议，如果我尝试相同的方法，我将收到与 ReferenceError: getLocation is not defined 相同的错误
如果你能提供 ClientFunction 的最终代码就好了。也许你在 ClientFunction 中调用了一个导入的模块，这可能是导致错误的原因
我没有使用你所说的 clientFunction，我没有使用与 DOM 相关的东西。而是使用第二个 const link = await mailer.getLink();等待 t.navigateTo(link)
在这种情况下，您可以使用 TestCafe 扩展“TestCafe Test Runner”在 Visual Studio Code 中调试代码。安装此扩展程序，在 getLink 函数中放置一个断点，然后右键单击夹具文件并选择“TestCafe：在 Chrome 中运行测试”，当断点被命中时，您将自动进入调试模式。

【解决方案2】：

由于 async/await 函数在 clientFunction 中不起作用作为一种解决方法，我将测试移到了单独的文件中，并将 getLink() 函数移到了测试之外

如果您想一个接一个地运行这两个文件，请将 package.json 中的脚本添加为“testcafe chrome file1.js && testcafe chrome file2.js”

欢迎直接回答

【讨论】：