如何从 Puppeteer 客户端环境运行 Node 包以进行测试答案

【问题标题】：How to run Node packages from Puppeteer client environment for testing purposes如何从 Puppeteer 客户端环境运行 Node 包以进行测试
【发布时间】：2020-10-06 23:08:56
【问题描述】：

我正在使用Puppeteer 在 react 环境中测试客户端功能 - 该功能本身不使用 React，但旨在导入 es6 react 模块并在最终用户 DOM 环境中运行。我需要 Puppeteer，因为这个函数依赖于诸如 innerText 之类的属性，这些属性在 jsdom 中不可用。

这个函数接受一个 DOM 元素作为参数，但是我在为它编写测试文件时遇到了麻烦。这是我的代码示例：

import path from 'path';
import puppeteer from 'puppeteer';
import {getSelectionRange, setSelectionRange} from './selection';

describe(
  'getSelection should match setSelection',
  () => {
    let browser;
    let page;

    beforeAll(async done => {
      try {
        browser = await puppeteer.launch();
        page = await browser.newPage();
        await page.goto(
          `file://${path.join(process.env.ROOT,
          'testFiles/selection_range_test.html')}`
        );
        await page.exposeFunction(
          'setSelectionRange', 
          (el, start, end) => setSelectionRange(el, start, end)
        );
        await page.exposeFunction(
          'getSelectionRange', 
          el => getSelectionRange(el)
        );
      } catch(error) {
        console.error(error);
      }

      done();
    });

    afterAll(async done => {
      await browser.close();
      done();
    });

    it('should match on a node with only one text node children', async () => {
      const {selection, element, argEl} = await page.evaluate(async () => {
        const stn = document.getElementById('single-text-node');

        // Since console.log will output in the Puppeteer browser and not in node console,
        // I added a line inside the selectionRange function to return the element it receives
        // as an argument.
        const argEl = await window.setSelectionRange(stn, 1, 10);

        const selectionRange = await window.getSelectionRange(stn);
        return {selection: selectionRange, element: stn, argEl};
      });

      // Outputs <div id="single-text-node">...</div> 
      // (the content is long so I skipped it, but it displays the correct value here)
      console.log(element.outerHTML);

      // Outputs {}
      console.log(argEl);
    });
  }
);

如cmets中所述，直接从page.evaluate()返回的元素是正确的，但是当作为参数传递时，函数接收到一个空对象。我怀疑是范围问题，但我完全没有解决方案。

【问题讨论】：

如果你 console.log(argEl) inside 你的 evaluate 块会发生什么？它打印什么？
首先，您不能信任控制台输出。它输出对象自己的可枚举属性。如果你想调试一个值，那就用真正的调试器调试它。
如果我理解正确的话，无论是暴露的函数还是 page.evaluste() 都不能在浏览器和 Node.js 上下文之间传输不可序列化的值（包括 DOM 元素）。
一旦你知道了确切的命令，它实际上真的很简单。见stackoverflow.com/questions/63671251/…
它应该打印一些东西，但在 chrome devtool 中而不是在您的终端中。

标签： javascript reactjs testing jestjs puppeteer

【解决方案1】：

遗憾的是，我找不到任何不会调用转译我的文件的解决方案，但希望我设法让它正常工作。

关键点是创建第二个转译配置，该配置将使用 UMD 格式生成 Web 浏览器可直接使用的代码。由于我使用汇总，这是我的 rollup,config.js 文件：

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import pkg from './package.json';

// The content that is actually exported to be used within a React or Node application.
const libConfig = [
    {
        inlineDynamicImports: true,
        input: './src/index.js',
        output: [
            {
                file: './lib/index.js',
                format: 'cjs'
            },
        ],
        external: [...Object.keys(pkg.dependencies || {})],
        plugins: [
            commonjs(),
            resolve(),
            babel({exclude: 'node_modules/**'})
        ]
    }
];

// Used to generate a bundle that is directly executable within a browser environment, for E2E testing.
const testConfig = [
    {
        inlineDynamicImports: true,
        input: './src/index.js',
        output: [
            {
                file: './dist/index.js',
                format: 'umd',
                name: 'tachyon'
            },
        ],
        external: [...Object.keys(pkg.dependencies || {})],
        plugins: [
            commonjs(),
            resolve(),
            babel({runtimeHelpers: true})
        ]
    }
];

const config = process.env.NODE_ENV === 'test' ? testConfig : libConfig;
export default config;

然后我稍微重写了我的脚本，以便在每次测试运行时生成我的测试包。

package.json

{
  "scripts": {
    "build:test": "NODE_ENV=test rollup -c && NODE_ENV=",
    "build": "rollup -c",
    "test": "yarn build:test && jest"
  },
}

最后，我将转译后的脚本添加到我的 selection_test.html 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selection range test</title>
    <script src="../dist/index.js"></script>
</head>
...

这让我可以像这样编写我的测试文件：

import path from 'path';
import puppeteer from 'puppeteer';
import {describe, beforeAll, afterAll, it} from '@jest/globals';

describe(
    'getSelection should match setSelection',
    () => {
        let browser;
        let page;

        beforeAll(async done => {
            try {
                browser = await puppeteer.launch({
                    headless: true,
                    args: ['--disable-web-security', '--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure'],
                });
                page = await browser.newPage();
                await page.goto(`file://${path.join(process.env.ROOT, 'tests/selection_test.html')}`, {waitUntil: 'networkidle0'});
                await page.setBypassCSP(true);
            } catch(error) {
                console.error(error);
            }

            done();
        });

        afterAll(async done => {
            await browser.close();
            done();
        });

        it('should match on a node with only one text node children', async () => {
            const data = await page.evaluate(() => {
                // Fix eslint warnings.
                window.tachyon = window.tachyon || null;
                if (window.tachyon == null) {
                    return new Error(`cannot find tachyon module`);
                }

                const stn = document.getElementById('single-text-node');
                const witnessRange = tachyon.setRange(stn, 1, 10);
                const selectionRange = tachyon.getRange(stn);

                return {witnessRange, selectionRange, element: stn.outerHTML};
            });

            console.log(data); // Outputs the correct values
            /*
            {
                witnessRange: { start: 1, end: 10 },
                selectionRange: {
                    absolute: { start: 1, end: 10 },
                    start: { container: {}, offset: 1 },
                    end: { container: {}, offset: 10 }
                },
                element: '<div id="single-text-node">Lorem ... sem.</div>'
            }
             */
        });
    }
);

唯一剩下的问题是getRange 的结果中的start.container 和end.container 是未定义的，但它似乎更有可能是puppeteer 的问题，它无法处理Range startContainer 和endContainer 属性 - 我能够在 page.evaluate 的内容和我的模块函数之间传递 DOM 引用而没有任何问题，因此看起来不再是问题了。

【讨论】：