Testcafe 客户端功能失败“ClientFunction 代码中发生错误：ReferenceError：_from2 未定义”

Question

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

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

但是它们都遵循类似的模式，它们都将是跨度的子元素，并包含带有其名称的显示文本和标题，通过 chrome Dev Tools Console 我可以使用类似于以下内容的内容访问它们

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)

有谁知道这是一个合法的错误还是一个实施错误？谢谢 - 任何指针也非常欢迎！

Answer 1

您可以像这样重写 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;
});

但是你会收到另一个错误：

ClientFunction cannot return DOM elements. Use Selector functions for this purpose.

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

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

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

ClientFunction 中的 return 语句必须返回一个 POJO（Plain Old Javascript Object）。

您可以通过使用这样的 Selector 对象来实现相同的目的：

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

如果您需要除属性和 textContent 之外的特殊过滤，您可以这样编写选择器：

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;
    });