Javascript Testcafe客户端功能失败“；ClientFunction代码中出现错误：ReferenceError:“未定义来自2的U”；

我试图使用客户机函数访问页面上子元素中的值，不一定是本例中的值，而是使用提供的testcafe选择器很难找到的值

在定义页面对象模型时，我希望能够访问多个iFrame模型上的Next、Back和Save按钮，这些按钮在DOM上可以有不同的位置，具体取决于模式视图，并且没有id（产品是旧的）

然而，它们都遵循类似的模式，它们都是跨度的子元素，并且包含一个显示文本和带有它们名称的标题，通过chrome开发工具控制台，我可以使用类似于下面的内容访问它们

Array.from(document.querySelectorAll('span')).find(el => el.textContent === "Next")

然而，当我尝试在testcafe中将其作为客户机函数调用时，我得到了一个错误，下面是一个基于我的方法但针对testcafe站点的示例，它给出了相同的错误

import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Client Function`
.page `https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html`;

const query = ClientFunction(() =>  Array.from(document.querySelectorAll('a')).find(el => el.textContent === "Filter DOM Nodes"));

test('Test query', async t => {
      const queryResult = await query();
      await t
      .click(Selector(queryResult))
      .wait(1500);
});

这个错误对我来说相当神秘：

  1) An error occurred in ClientFunction code:

      ReferenceError: _from2 is not defined

      Browser: Chrome 71.0.3578 / Mac OS X 10.13.6

          6 |    .page

   `https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html`;
          7 |
          8 |const query = ClientFunction(() =>
      Array.from(document.querySelectorAll('a')).find(el => el.textContent
      === "Filter DOM Nodes"));
          9 |
         10 |test('Login and register user', async t => {
       > 11 |      const queryResult = await query();
         12 |      await t
         13 |      .click(Selector(queryResult))
         14 |      .wait(1500);
         15 |});
         16 |

         at query (/Users/david/Documents/testcafe/demo/query.js:11:33)
         at test (/Users/david/Documents/testcafe/demo/query.js:10:1)
         at markeredfn

   (/usr/local/lib/node_modules/testcafe/src/api/wrap-test-function.js:17:28)
         at <anonymous>
      (/usr/local/lib/node_modules/testcafe/src/api/wrap-test-function.js:7:5)
         at fn
      (/usr/local/lib/node_modules/testcafe/src/test-run/index.js:239:19)
         at TestRun._executeTestFn
      (/usr/local/lib/node_modules/testcafe/src/test-run/index.js:235:38)
         at _executeTestFn
      (/usr/local/lib/node_modules/testcafe/src/test-run/index.js:284:24)



 1/1 failed (5s)

1）ClientFunction代码中出现错误：
ReferenceError:_from2未定义
浏览器：Chrome 71.0.3578/Mac OS X 10.13.6
第6页
`https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html`;
7 |
8 | const query=ClientFunction（（）=>
Array.from（document.querySelectorAll（'a'））.find（el=>el.textContent
==“筛选DOM节点”）；
9 |
10 |测试（'Login and register user'，异步t=>{
>11 | const queryResult=等待查询（）；
12 |等待t
13 |。单击（选择器（查询结果））
14 |等待（1500）；
15 |});
16 |
在查询时（/Users/david/Documents/testcafe/demo/query.js:11:33）
测试时（/Users/david/Documents/testcafe/demo/query.js:10:1）
在markeredfn
（/usr/local/lib/node_modules/testcafe/src/api/wrap test function.js:17:28）
在
（/usr/local/lib/node_modules/testcafe/src/api/wrap test function.js:7:5）
在fn
（/usr/local/lib/node_modules/testcafe/src/test run/index.js:239:19）
在测试运行时。\u executeTestFn
（/usr/local/lib/node_modules/testcafe/src/test run/index.js:235:38）
at_executeTestFn
（/usr/local/lib/node_modules/testcafe/src/test run/index.js:284:24）
1/1故障（5s）

---

有人知道这是一个合法的bug还是一个实现错误吗？谢谢-欢迎任何指点

您可以像这样重写ClientFunction：

const query = ClientFunction(() =>  {
    const results = [];
    const allLinks = document.querySelectorAll('a');
    allLinks.forEach(link => results.push(link));
    const foundElement = results.find(el => el.textContent === "Filter DOM Nodes");
    return foundElement;
});

const nextButton = Selector('span')
  .find('a')
  .withAttribute('title', 'NEXT')
  .withText('NEXT');
await t.click(nextButton);

const nextButton = Selector('span')
    .find('a')
    .filter((link) => {
        if (/* some condition processed on link element */) {
            // this link element is the one to be clicked
            return true;
        }
        return false;
    });

但随后您将收到另一个错误：

ClientFunction无法返回DOM元素。为此，请使用选择器功能。

ClientFunction中的代码在浏览器中执行

调用此ClientFunction并获取其结果的代码在浏览器外部的NodeJS进程中执行

您试图实现的是对象编组。您正在尝试将位于浏览器进程中的DOM对象转移到另一个单独的进程中。这只能通过序列化实现，但DOM对象是不可序列化的

ClientFunction中的return语句必须返回POJO（纯旧Javascript对象）

使用选择器对象可以实现相同的效果，如下所示：

const query = ClientFunction(() =>  {
    const results = [];
    const allLinks = document.querySelectorAll('a');
    allLinks.forEach(link => results.push(link));
    const foundElement = results.find(el => el.textContent === "Filter DOM Nodes");
    return foundElement;
});

const nextButton = Selector('span')
  .find('a')
  .withAttribute('title', 'NEXT')
  .withText('NEXT');
await t.click(nextButton);

const nextButton = Selector('span')
    .find('a')
    .filter((link) => {
        if (/* some condition processed on link element */) {
            // this link element is the one to be clicked
            return true;
        }
        return false;
    });

如果您需要除属性和文本内容之外的特殊筛选，您可以这样编写选择器：

const query = ClientFunction(() =>  {
    const results = [];
    const allLinks = document.querySelectorAll('a');
    allLinks.forEach(link => results.push(link));
    const foundElement = results.find(el => el.textContent === "Filter DOM Nodes");
    return foundElement;
});

const nextButton = Selector('span')
  .find('a')
  .withAttribute('title', 'NEXT')
  .withText('NEXT');
await t.click(nextButton);

const nextButton = Selector('span')
    .find('a')
    .filter((link) => {
        if (/* some condition processed on link element */) {
            // this link element is the one to be clicked
            return true;
        }
        return false;
    });

---

这是很棒的hdorgeval，感谢您的提示，我使用了您重构我的客户机函数的代码，并将其放入选择器函数中。我唯一剩下的问题是，为什么我的客户机函数的原始语法会给出它所产生的错误-我本以为查询会正常运行，但根据您上面所说的，对象的返回将是一个问题？@Dobhaweim，我同意您的说法，from2的

\u错误是意外和奇怪的。这可能是一个bug，也许你可以在TestCafe上打开一个问题。你知道错误是从哪里来的吗？我遇到了一个类似的问题，但对于ReferenceError指的是什么，我看不到可能的解释。