Support specific selector to narrow test to certain element

[cburgmer]

Consider the following problem:

Although you have broken down your CSS + HTML into small components you still might want to only test a certain subset of the actual page.

Especially when testing against page object code (JS) and corner cases in the view implementation one might only be interested in parts of the page.

Testing against the full page will make more tests break when refactoring and accepting changed test cases will be the norm making it more likely to miss actual breaking cases.

[ckundo]

@cburgmer this feature is critical for us. We're creating a styleguide using https://github.com/trulia/hologram, and we want to look for per component regressions. Doing a diff on the full page is not helpful in this scenario.

We may be able to work on a pull request if this is something you're still interested in. cc @stubbornella @gpleiss

[cburgmer]

Sadly I haven't yet had the chance to document a styleguide with hologram myself, that might explain the lack of the necessary support here.

I started to provide the underlying implementation for clipping in cburgmer/rasterizeHTML.js#33. Currently there's an experimental and un-documented option "clip" that takes a selector. There are a few issues still open as noted in the link. It's still unclear to me whether the implementation can hold up to a wide range of HTML documents in the future (technically it currently depends on an iframe rendering to exactly match a document embedded inside an SVG's foreign object for calculating the clipper viewport).

Next, this option would have to be wired into https://github.com/cburgmer/csscritic/blob/master/src/browser/browserrenderer.js for a test case to support it.

Apart from that, loading a full document for only a certain area over and over again might prove slow. Maybe keep that in mind.

The styleguide my team is currently building basically provides a single HTML document for every example. We then initially came up with a single page including everything via iframes when needing a single overview page. That again made it easy to test later on.

[ckundo]

@cburgmer thanks for the reference. We may first try your approach of one component per page. That should make it faster and less brittle for us to test. I'm not yet sure how we'd accomplish that with Hologram, but we'll see and let you know how it goes.