Webpack Extract Plugin을 사용하여 CSS 스타일 w/No 스타일로 렌더링

Question

Webpack 3에서 Extract Text 플러그인을 사용하면 효과가 있지만 최근에는 Selenium에서 작동하는 QA 자동화 엔지니어를 고용했습니다.

우리는 셀레늄으로 요소를 선택하는 것이 더 쉽지만 프런트 엔드 측면에서 논의하는 중입니다. 그것은 우리가 컴포넌트를 렌더링하기 위해 클래스를 사용하기 위해 사용하지 않는 CSS를 작성하는 것과 관련이 있습니다. 플러그인이 본질적으로하는 것과 반대입니다.

플러그인을 사용하여이를 수행 할 수있는 방법이 있습니까? 또한 Selenium에서 일한 경험이 있다면 제안을 열어주십시오. 어쩌면 해킹 일 수도 있습니다.

예 : 그것은 CSS 해당 있기 때문에이 라인className={ [styles.option, styles[label]].join(' ') }에서

{ 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 
    } 

, 매핑 항목 중 하나의 레이블은 클래스로의 라벨을 적용합니다. 다른 사람들은 Extract Text가 어떻게 작동하는지에 근거하지 않습니다.

이렇게하면 QA 엔지니어가 특정 요소에 대해 HTML을 쿼리하기가 어려워집니다.

나는 testing 모드를 실행할 수 있지만 테스트를 위해 다르게 렌더링한다는 생각이 들었습니다. 실제로 테스트 할 실제 코드에 대한 테스트의 목적을 무효로 만듭니다.

Answer 1

이와 비슷한 경험을 한 결과, data-id="foo"을 추가 한 다음 셀렌 테스트에서 xpath 선택기를 사용했습니다. $x('//*[@data-id="foo"]')