Search_box = _element_by_css_selector('#root > div > ul > li > div > p')
To illustrate this, I'll show the results of running a Selenium test to a site with a search bar that uses React to update the results after each keystroke and display all Pokemon with matching names (the repo for this site is here). To your surprise, it works perfectly when conducted manually. Maybe you grab a phone or simulator and go through the steps in the failed tests manually to see what happened. You watch the video recording of the test and it's like the site isn't reacting to any input. But then the mobile tests begin to finish and you see that they're failing tests for simple things like filling in forms. The results look good initially - all your desktop browsers seem to be passing.
Everything now 'reacts' to what the user is doing, the site flows better, and your manual testers love it!Īll you have left to do is run automated Selenium tests to make sure your changes work as expected across different browsers. Maybe you've added a live search that updates with every character typed or instant input checking on your forms so users can quickly correct invalid data before submission. So imagine this: you've decided to update your site with some neat features from the React library.
ReactJS is one of the many technologies that allow us to move away from tedious non-interactive pages that have to reload to display new content. There's no need to load a new page on every action now. It was fun at the time, but it's a downright painful and frustrating experience by modern web standards. Several of them were essentially HTML text adventures - you would navigate by clicking links or images, then the page would reload with the results of whatever action you took. You get all of these benefits while still writing the CSS you know and love, just bound to individual components.When I was young, I loved to play browser-based games. Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
styled-components makes it obvious, as every bit of styling is tied to a specific component. Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase.You never have to worry about duplication, overlap or misspellings. No class name bugs: styled-components generates unique class names for your styles.
Combined with code splitting, this means your users load the least amount of code necessary. Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically.
By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.Īpart from the improved experience for developers, styled-components provides: Styled-components is the result of wondering how we could enhance CSS for styling React component systems.