Media Query Breakpoint Testing

[oleersoy]

It would be nice to be able to launch a test in multiple browser windows that correspond to the various media query breakpoints in order to instantly invoke the corresponding media query tests. We can do this manually by using Device Mode and Mobile Emulation, but that requires interaction.

Anyone know if perhaps Browsersync or something else does this, and whether it would be acceptable to embed it in the SUIT tests?

[timkelty]

That would be nice if we could do it directly with Browsersync.
If we went the screenshot route - we could probably do it with PhantomJS relatively easily.

Also - a related tool: http://breakpointtester.com/

[oleersoy]

Wow - http://breakpointtester.com/ is exactly what I was thinking...I think.

So does the screenshot route mean show screenshots of PhantomJS renderings at viewport sizes that match the media query breakpoints?

Google also has:
https://developers.google.com/web/tools/starter-kit/

I posted an issue on the browsersync repository and asked whether it can give us something similar to what the breakpoint tester does:
BrowserSync/browser-sync#838

[simonsmith]

This feels like a duplicate of #114

I'd be in favour of closing this and keeping discussion in one place

[oleersoy]

The objective of #114 is to enable designers studying the tests to get up to speed as fast as possible on the CSS concept / effect that the CSS has.

The objective this issue would be to be able to rapidly verify the effect of the media queries on the visual rendering of the test by opening browsers with varying viewport sizes triggering the media queries. In other words be able to verify the media queries in action with minimal effort.

It could be done with a button that triggers javascript to resize the browser at given timing intervals. It can probably just be closed / deferred though. I'm sure breakpoint issues will get caught by users.

[oleersoy]

Just realized that Bootstrap does something similar here:
Bootstrap Responsive Utilities

Except they just tell you do resize your browser to to trigger the queries.

[oleersoy]

Actually this would probably best be handled by something like:
https://addons.mozilla.org/en-us/firefox/addon/emuflex/

Feel free to close.

[simonsmith]

I'm planning to implement automated CSS testing on some static components for a work project. If it goes well we can look at bringing something like that into SUIT for testing components.

Something like https://github.com/garris/BackstopJS

[oleersoy]

Wow - That's pretty intriguing. I'll have a closer look as well.