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

Question

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

在定义页面对象模型我希望能够进入下一步,返回并保存在多个iFrame的情态动词的按钮,就可以对DOM的不同位置取决于模式的看法,并没有IDS(产品是旧的).

他们不过都遵循类似的模式,他们都将是一个跨度的子元素,并包含一个显示文本和标题印有其名字,通过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)

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

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