We use the Extract Text plugin with Webpack 3 and it works great but we recently hired a QA automation engineer who works in Selenium.
We are discussing ways to make selecting elements with Selenium easier but on the front end side. That would involve us writing CSS that we don't use in order to get a class to render on a component. The opposite of what the plugin does essentially.
Is there any way to accomplish this with the plugin? Also open to suggestions if you've worked in Selenium. Maybe even a hack.
Example:
{ 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
}
In this line className={ [styles.option, styles[label]].join(' ') }, the label for only one of the mapped items applies it's label as a class because it has corresponding CSS. The others do not otherwise based on how Extract Text works.
This is where it becomes difficult for the QA engineer to query the HTML for a particular element.
I had a thought of being able to run testing mode but rendering things differently for tests sort of defeats the purpose of testing against real world code that will go to prod.
