使用 Webpack Extract Plugin 渲染不带样式的 CSS 类答案

【问题标题】：Render CSS Classes w/ No Styles Using Webpack Extract Plugin使用 Webpack Extract Plugin 渲染不带样式的 CSS 类
【发布时间】：2018-04-30 07:44:04
【问题描述】：

我们在 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。其他的不是基于提取文本的工作原理。

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

我曾想过能够运行 testing 模式，但为测试呈现不同的东西有点违背了针对将用于生产的真实世界代码进行测试的目的。

【问题讨论】：

标签： reactjs selenium webpack extract-text-plugin

【解决方案1】：

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

然后在 selenuim 中，您可以执行以下操作： '//*[@data-id="foo"]'

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

【讨论】：

啊！我也考虑过......它现在可以工作......感谢您的评论。
我们的案例非常成功。