Рендеринг CSS-классов без стилей с помощью плагина Webpack Extract

Question

Мы используем плагин Extract Text вместе с Webpack 3, и он отлично работает, но недавно мы наняли инженера QA, который работает в Selenium.

Мы обсуждаем способы сделать выбор элементов с помощью 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 режим, но рендеринг по-разному для тестов, что-то вроде победы над целью тестирования на реальном коде, который пойдет в prod.

Answer 1

Подобный опыт, когда мы это делали data-id="foo", затем с помощью селекторов xpath в наших тестах селена.

Тогда в selenuim вы можете делать такие вещи, как:'//*[@data-id="foo"]'

или проверить в хром с $x('//*[@data-id="foo"]')