FabricJS 从单元测试或自动化工具检查画布答案

【问题标题】：FabricJS Inspecting the Canvas from UnitTests or Automated ToolsFabricJS 从单元测试或自动化工具检查画布
【发布时间】：2020-02-21 07:53:50
【问题描述】：

我们使用的是 FabricJS，当在 web 应用程序中执行操作时，项目可以呈现到画布上。

即单击一个按钮，一个对象将出现在织物画布中。

使用自动化 e2e 测试检查画布是否已正确更新的最佳方法是什么？

我们正在使用 Puppeteer 和/或 Protractor 进行端到端测试。

有没有检查画布是否包含所有预期元素的好方法？ DevTools 是否可以通过任何方式获取画布中对象的详细信息？

问候，

这个问题的其他来源没有解决方案.....

https://www.reddit.com/r/javascript/comments/4ltvfe/are_unit_tests_with_a_fabricjs_app_possible/

这是一个示例，Puppeteer 可以打开 FabricJs 示例页面。可以获得整个页面的截图，以及画布的dataurl。但是，最好能够检查/跟踪画布状态及其包含的对象及其位置。

http://fabricjs.com/static_canvas

您如何从示例中获得任何行星的位置？

行星是 fabric.Circle 对象，但渲染到画布上。有没有办法跟踪或跟踪他们？

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false, args:['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();

  await page.goto('http://fabricjs.com/solar-system');
  await page.waitFor(4000)
  await page.screenshot({path: 'example.png'});

  const dataUrl = await page.evaluate(() => {
    const canvas = document.getElementsByClassName("lower-canvas")[0];
    console.log(canvas);
    return canvas.toDataURL();
  });

  console.log(dataUrl);
  await page.goto(dataUrl);
  await page.waitFor(4000)
  await browser.close();
})();

亲切的问候，

【问题讨论】：

标签： javascript protractor fabricjs puppeteer

【解决方案1】：

我们寻求的解决方案是在页面中设置一个隐藏按钮。

此按钮将链接到一个函数，该函数将查询织物画布并将对象详细信息列表添加到全局变量。

可以查询此全局变量，从而允许测试在织物画布中定位对象。它很笨重，但很有效。

很想听听任何其他建议。

async renderAllObjectsToApplicationState() {
    console.log('Adding objects to application info');
    const objs = this._mainCanvas.getObjects().map(ob => ({
        id: ob.id,
        left: ob.oCoords.tl.x,
        top: ob.oCoords.tl.y,
        width: ob.oCoords.br.x - ob.oCoords.tl.x,
        height: ob.oCoords.br.y - ob.oCoords.tl.y,
        visible: ob.visible,
        center: ob.path
            ? this.getCoordCenter(ob.path, this._mainCanvas.getZoom())
            : null,
    }));

    applicationInfo['fabricObjects'] = objs;
}
<button
    id="getFabricObjBtn"
    class="float-right"
    style="display: none;"
    (click)="renderAllObjectsToApplicationState()"
></button>

async function getImageViewerFabricObjects(){
    await page.waitFor(100);
    await page.evaluate(() => document.querySelector('#getFabricObjBtn').click());
    await page.waitFor(250);
    const fabricObjects = await page.evaluate(() => window.applicationInfo.fabricObjects);
    return fabricObjects;
}

const fabricObjects = await getFabricObjects();

const roi = fabricObjects.filter(obj => obj.id==="roi");

【讨论】：