代码之家 › 专栏 › 技术社区 › AJC24

backstopjs-为所有方案设置通用选择器

backstop.js

1

AJC24 · 技术社区 · 6 年前

我正在使用backstopjs对一些react组件运行一些可视化回归测试。我的所有组件都显示在一个“公共”包装器中的单个故事书页面上。

例如,故事书中的每个故事都设置为显示以下内容:

<div key="my_unique_key" id="component_preview">
  <MyReactComponentHere />
</div>

因为我的所有组件都单独显示在带有ID的公共容器中的单独页面上 component_preview ,我想在backstopjs中为 全部的 测试套件,因此这是每个测试的屏幕捕获焦点(即,这是为了避免捕获在每个页面上与组件一起显示的任何降价或属性表)。

我知道我可以在每个场景中分别设置如下:

scenarios: [
  {
    ...
    selectors: [
      'div[id="component_preview"]'
    ],
    ...
  }
],

但是,考虑到我可能有大量的场景(这是一个不断增长的项目,所以我不知道将来要单独捕获多少组件),我希望能够将其设置为 一般规则 对于所有场景,不必为每个场景单独设置。

我试过设置一个 selectors 数组在 scenarios 但它没有任何效果。

是否可以为所有方案设置这样的通用选择器,而不必在每个方案上单独设置它?

如果我必须在每个场景中单独设置(只是意味着相同配置的更多工作/重复),这没什么大不了的,但是如果可能的话,我想避免这样做。

1 回复 | 直到 6 年前

1

2

AJC24 6 年前

好的,所以我一直在做一些关于这个的工作,并且提出了这个解决方案,它可以满足我的需要,而不需要在每个场景中设置一个要捕获的公共选择器。

最初的目标是单独捕获我的反应组件,显示在故事书上(即没有降价或道具表阻碍)。

仅为每个人参考,这些是我正在使用的相关依赖项和版本(从我的项目中复制和粘贴) package.json 文件):

"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-info": "^3.4.8",
"@storybook/addon-links": "^3.4.8",
"@storybook/addon-options": "^3.4.8",
"@storybook/addons": "^3.4.8",
"@storybook/react": "^3.4.8",
"backstopjs": "^3.2.19",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1"

作为进一步说明,我正在使用 puppeteer 具有 backstopjs .

我必须解决的第一个问题是,故事书在一个内部显示了你的组件、降价和道具表 <iframe> 每个页面上的元素。这导致了 后台打印 因为CSS范围没有内部的概念 document 在那里面 <iframe> . 如果我的组件比即时用户界面中可见的组件大,那么它就不会意识到 文件 比外面的长。除此之外,我无法设置任何 hideSelectors 或 removeSelectors 对于内部的任何组件 <iframe> 因为它超出了范围。

所以第一个有助于隔离内心世界的重大发现 <iframe> 在它自己的页面上添加 iframe.html 网址如下(例如-假设您正在运行 localhost 在默认端口):

http://localhost:6006/iframe.html?selectedKind=...

这隔离了以前的内在 <iframe> 在其自己的页面上,不显示左侧菜单面板。所以,从这里开始,我可以按照自己的意愿隐藏和移除选择器,因为所有内容都在范围内。页面上显示的故事书标记和属性表方便地位于一个单独的 <div> 元素。我用来指向这个的唯一CSS选择器 <分区> 元素如下:

div[id="root"] > div > div > div[style*="font-family: -apple-system"]

所以我决定做的不是设置一个在每个场景中捕获的公共选择器,而是调用一个公共的 onReadyScript 在我的 backstop.json 配置文件如下:

{
  "id": "suite_name",
  "viewports": [
    ...
  ],
  "onReadyScript": "my-on-ready-script.js",
  "scenarios": [
    ...
  ],
  ...
}

然后,我的脚本被设置为删除标记和属性表。 <分区> 要素如下:

module.exports = async function (puppeteer) {
  /* Remove the markdown and prop tables from the Storybook preview panel */
  await puppeteer
    .$eval('div[id="root"] > div > div > div[style*="font-family: -apple-system"]', (markdownAndPropTables) => {
      markdownAndPropTables.parentNode.remove();
    });
};

这使我的组件在每个页面上完全独立地显示,并且 后台打印 然后,就可以单独捕获该组件。

这是我能找到的实现目标的最佳解决方案。我也将此作为其他人的潜在解决方案。希望这里面有什么能帮助其他人做我想做的事情!