Question

我们在Webpack 3中使用Extract Text插件，它运行良好，但我们最近聘请了一位在Selenium工作的QA自动化工程师。

我们正在讨论如何使用Selenium选择元素更容易，但在前端方面。这将涉及我们编写我们不会使用的CSS，以便让一个类在组件上呈现。与插件本质上相反。

有没有办法用插件来实现这个目的？如果您在Selenium工作，也可以接受建议。也许甚至是一个黑客。

示例：

{ vehicleOptions.map((option, index) => {
  let [label, value] = option
  if (label && value) {
    return (
      <li
        className={ [styles.option, styles[label]].join(' ') }
        key={ `${ label }_${ index }` }>
        <img
          className={ styles.icon }
          src={ `/images/icon-${ label }@2x.png` }
          />
        <p className={ styles.value }>
          { typeof value === 'number'
            ? formatDistance(value, ',', 'mi')
            : value
          }
        </p>
      </li>
    )
  } else {
    return null
  }

在此行 className={ [styles.option, styles[label]].join(' ') }中，只有一个映射项的标签将其标记为类，因为它具有相应的CSS。其他人则不会根据Extract Text的工作原理。

这是QA工程师难以在HTML中查询特定元素的地方。

我曾想过能够运行testing模式，但是对于测试而言，渲染方式会有所不同，从而无法测试将要生成的真实世界代码。

Answer 1

类似的经验，我们最终做的一件事是添加data-id="foo"，然后在我们的硒测试中使用xpath选择器。

然后在selenuim你可以做以下事情： '//*[@data-id="foo"]'

或用chrome测试 $x('//*[@data-id="foo"]')

使用Webpack Extract插件渲染没有样式的CSS类

1 个答案: