While updating an inherited web project, I’ve been slowly introducing some well-defined libraries to the mix. My current favorite being Vuetify — designed to add some decent style standards to reactive Vue components. This happens to be what I’ve chosen for the overwhelming task of modernizing the Store Locator Plus plugin UX (you’ll see the first hints on the forthcoming Add Locations interface in the next release) as well as for several other “clean slate” projects.
If you are writing web apps and are not familiar with CSS standard libraries or haven’t heard of the “12-point Grid System” you should start learning it. It will save a lot of time building web and mobile apps that are responsive. Libraries like Vuetify and Foundation for Sites with only the CSS components are well-tested with pre-defined rules that not only you will learn and be able to re-use but you’ll likely find many other web developers are already familiar with this configuration.
Digging into Cypress.IO in a sprint to replace my almost-completely-useless stack of Selenium IDE tests for Store Locator Plus, I’ve run into some issues that seem to go beyond my lack of knowledge with the tool.
Yes, it is a great step in the right direction and it can be man-handled to do what I need. For now. But tools should not be forcing you to do things a specific way. That are supposed to make you more efficient, no re-train you or add extra steps.
Cypress.IO has shortcomings when it comes to doing real-world end-to-end testing of web apps. Order of tests is one of them.
Testing Store Locator Plus with lots of locations is a chore. Thankfully Cypress.IO data list processing makes this a lot easier.
It turns out that the old-school Selenium IDE scripts that we’ve been using to test Store Locator Plus for years will no longer work. We already knew Firefox versions beyond 54 broke things — but we kept an old install on hand so while we port 500+ test scripts to a new system. What finally broke the old-school Firefox bandaid was moving Store Locator Plus towards a reactive application using Vue.
If you are running your own Linux server — an AWS EC2 instance, perhaps, you may want to check that your etc daemon I’d not accessible.
Read this ARS Technica article for more info:
After discussing projects over the past week, one of the guys at Automattic brought up CypressIO. If you’ve been following the recent posts on Lance.Bio you know that the path to running automated web testing has run from Selenium IDE, the QA tool of choice for the past few years for Store Locator Plus, to recent forays into Selenium Webdriver. Webdriver is powerful but difficult to code and soon led to the discovery of WebdriverIO, then Mocha and Chai on top of that. The new stack makes it easier to write more advanced tests than we could in Selenium IDE — but it was like pulling teeth to get all the right pieces installed and working.
More info, less pain
That is what CypressIO promotes on their home page. “Test your code, not your patience.” and “No more async hell.” — if you’ve gone through the Selenium Webdriver setup you’ll understand what both of these mean. It takes several false starts to understand all the pieces you MUST install to get Selenium Webdriver working. CypressIO has made it easy; it is even easier than they promote on their website with the most recent builds.
I’ve only started simple test writing but in less than 20 minutes I had a fully functional test running with all the extras from a completely “clean” install base. If you have NodeJS and NPM up-to-date and a faster Internet connection than we have in tech-orphan Charleston South Carolina, you can be up and running in 5 minutes.