Question

为了能够为我们的Webpack构建的React应用程序编写Selenium测试用例，我们将data- *属性添加到HTML元素的某些部分，例如：

<div class="Component__item___2jdnc" data-app-feature="example-id"></div>

我们可以使用它们来定位要与之交互并断言的元素。但是，在生产环境中，我希望将它们删除。怎么可能实现呢？

Answer 1

有一些babel插件可能符合这个要求：

从评论中编辑

如果属性值为undefined，则会自动忽略属性。您可以使用它，并使用某种配置（可能是process.env.NODE_ENV？）和Higher-Order Component来设置data-app-feature值的道具，只有在生产中才会生效。

<强> HOC

const appFeature = (Component, appFeature) => (props) => {
  const isRunningInProduction = configuration.isProduction // or however you want to set this
  return <Component appFeature={ isRunningInProduction ? appFeature : undefined } {...props}  />
}

<强>组件

const ExampleComponent = ({appFeature}) => {
  return <div class="Component__item___2jdnc" data-app-feature={appFeature}></div>
}

export default appFeature(ExampleComponent, "example-id")

Answer 2

该答案仅适用于使用webpack进行应用程序的生产/开发的人们。在 webpack.prod.config 中执行以下操作。忽略 webpack.dev.config

通过运行npm install babel-plugin-react-remove-properties

按如下所示将其添加到babel loader配置中

  {
    test: /\.(js|jsx)$/,
    use: [{
      loader: 'babel-loader',
      options: {
        plugins: [
          ["react-remove-properties", {"properties": ["data-test-id"]}]
        ]
      }
    }],
    exclude: /node_modules/,
  }

data-test-id是我们将在硒测试用例中使用的属性，以获取元素。根据问题，它是data-app-feature

我们可以使用以下插件来做同样的事情。

Answer 3

使用styled-components时遇到了同样的问题。这是我发现不使用HOC或Babel插件的最直接的解决方案。

我创建了一个检查特定环境的函数，然后返回您传递给它的值或undefined。如果属性值为undefined，则不会包含该属性。

export const ifDev = val => (process.env.NODE_ENV === "development" ? val : undefined);

然后在您的组件中：

import { ifDev } from './dev';

<div className="sc-fMiknA" data-app-feature={ifDev("element-id")}></div>

现在，我可以在使用生成的类名的同时在浏览器测试中找到元素，并且这些属性将不包含在生产版本中。

Answer 4

你可以使用selenium来做到这一点：

WebElement yourElement = driver.findElement(By.xpath("xpath to element"));

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].removeAttribute('data-app-feature','example-id')",yourElement);

Answer 5

创建一个工具，删除属性（几行代码）并在后期构建操作中使用该工具。

删除生产版本中的html属性

5 个答案:

从评论中编辑