3 ms·

How do people here test their UIs? As an extreme example, the link here contains hundreds of lines of declarative code; a single typo (unclosed bracket, misspe

How do people here test their UIs? As an extreme example, the link here contains hundreds of lines of declarative code; a single typo (unclosed bracket, misspelled CSS property...) could break the site. So how is it tested? Probably it's not tested in any automated way, because manual testing (open the site and look) is much easier. Maybe lots of software is like that, to various degrees.

2T1Qka0rEiPr 8y ago
You can implement a combination of end-to-end browser driven tests as well as applying visual regression analysis etc. I wrote something which would actually parse two sites and return the differences in the DOM/CSSOM many years ago, but it worked nicely :)
leethargo 8y ago
I always thought that websites are tested with Selenium and similar (https://www.seleniumhq.org/ https://www.seleniumhq.org/). For other kind of GUIs, you can also emulate mouse + keyboard interaction with tools like Sikuli (http://www.sikulix.com/ http://www.sikulix.com/). This is also scriptable, e.g. in Python, but actually quite painful in my experience: When you GUI needs significant time for loading and rendering, the Sikuli program might fail to find a button that did not appear yet. So you need to play with timeouts and trial-and-error.
pault 8y ago
E2E testing using a headless browser controlled by a framework like puppeteer. Scaling up with many different OS/browser combinations gets difficult and expensive fast though, which is why services like browserstack exist. Testing CSS is sometimes done by diffing screenshots but I personally don't think it's worth the effort unless your app has hundreds of pages.
rkangel 8y ago
I like the flutter widget test approach (it't not unique, but it's well executed there): https://flutter.io/docs/testing#widget-testing https://flutter.io/docs/testing#widget-testing In flutter parlance, a whole view (page/screen) is a widget, and that's the granularity I was testing it - it's good for testing the high level patterns that the screen is meant to adhere to, e.g. Send button appears when there is some text to send. You can also have golden images for rendering of each screen. They change a lot, but that at least forces developers to look at the changes each time and decide if they're on purpose.

2T1Qka0rEiPr 8y ago

You can implement a combination of end-to-end browser driven tests as well as applying visual regression analysis etc. I wrote something which would actually parse two sites and return the differences in the DOM/CSSOM many years ago, but it worked nicely :)

leethargo 8y ago

I always thought that websites are tested with Selenium and similar (https://www.seleniumhq.org/ https://www.seleniumhq.org/). For other kind of GUIs, you can also emulate mouse + keyboard interaction with tools like Sikuli (http://www.sikulix.com/ http://www.sikulix.com/). This is also scriptable, e.g. in Python, but actually quite painful in my experience: When you GUI needs significant time for loading and rendering, the Sikuli program might fail to find a button that did not appear yet. So you need to play with timeouts and trial-and-error.

pault 8y ago

E2E testing using a headless browser controlled by a framework like puppeteer. Scaling up with many different OS/browser combinations gets difficult and expensive fast though, which is why services like browserstack exist. Testing CSS is sometimes done by diffing screenshots but I personally don't think it's worth the effort unless your app has hundreds of pages.

rkangel 8y ago

I like the flutter widget test approach (it't not unique, but it's well executed there): https://flutter.io/docs/testing#widget-testing https://flutter.io/docs/testing#widget-testing In flutter parlance, a whole view (page/screen) is a widget, and that's the granularity I was testing it - it's good for testing the high level patterns that the screen is meant to adhere to, e.g. Send button appears when there is some text to send. You can also have golden images for rendering of each screen. They change a lot, but that at least forces developers to look at the changes each time and decide if they're on purpose.