Difficulties with screenshot tests

Looking for a bit of guidance here dealing with a page with many Code Mirror instances.

The short version of it is I have maybe 10 or 15 CM instances on a page, and am doing visual testing on this page by screenshotting the DOM. Many of those instances are not “above the fold” when they are created.

I have been having trouble with gutters. It seems that gutters are resized to the lines programatically. But while the gutters are out of view the line height seems to be programmatically hitting 14px, but after scrolling into view they get readjusted to 24px.

Now I’m setting a line height of 1.5 in a theme, and my guess is that the theming is applying after an initial gutter height calculation.

  ".cm-scroller": {
    "line-height": "1.5",

So… I’m kind of looking for a reliable way to do the following programatically:

  • go through and make sure the gutter layout calculations are actually done on all CM instances on the page
  • have some sort of sentinel that would let me detect some finality there

Is this maybe something where I could write up an extension to get this somehow working?

I have tried just throwing in a requestMeasure but it doesn’t seem to accomplish much, as the gutter plugin seems to be checking whether its visible before doing work (something I have seen by scrolling very slowly and seeing only the top of a line as well). This might be another issue though

Of course some magic mechanism to really actually for real calculate all display properties once feels very helpful for my case but I understand this might be a bit odd. Just would really like to have visual testing be stable here. And I might be doing something wrong, but it seems like a lot of the update methods have early escapes for when they are not in view.

So in the process of your tests, you somehow make the browser output a screenshot of the entire page, including the part not in its (virtual) window?

One way around this would be to abuse the mechanism CodeMirror has to handle printing (which provides a similar issue) by doing something like window.dispatchEvent(new Event("beforeprint")). That will cause the editors to always consider itself to be in view, and trigger a re-measure.

No, the editor just starts with a crude approximation (using a hard-coded 14px line height), and updates that as soon as it measures. I tries to avoid touching DOM layout as much as possible to avoid having people pay a performance cost for off-screen editors.

1 Like