transformDOM not working

[ErikCupal]

Hello @trotzig! We have been using Happo with Cypress almost for two years without issues. Recently we migrated from Cypress to Playwright. All went well except of Happo DOM transformations, which stopped working.

First I thought the problem is on our side, but now I have the suspision that it's a problem in happo-playwright. Specifically, it looks that the transformDOM property is not even passed to the happoTakeDOMSnapshot function:

I compared it with happo-cypress, there the transformDOM is passed:

[lencioni]

Hi @ErikCupal! Thanks for the report and the good investigation.

I'm looking into this issue now and I want to make sure that I'm completely understanding the issue and how to best solve it for you. Can you please give me a little more information about exactly how you are using the transformDOM option with happo-cypress today? An example code snippet of what you are passing to the transformDOM option would be really useful for me. I just want to be certain that we get things resolved in a way that will work for you.

[ErikCupal]

Hi @ErikCupal! Thanks for the report and the good investigation.

I'm looking into this issue now and I want to make sure that I'm completely understanding the issue and how to best solve it for you. Can you please give me a little more information about exactly how you are using the transformDOM option with happo-cypress today? An example code snippet of what you are passing to the transformDOM option would be really useful for me. I just want to be certain that we get things resolved in a way that will work for you.

Thanks for quick reply @lencioni. Here is an example of how we are using transformDOM, other usages are 99% the same:

    const page = await context.newPage()
    
    // test code
    // ...

    await happoPlaywright.screenshot(page, page.locator("body"), {
      component: "Members page",
      variant: "default",
      transformDOM: {
        selector: "[data-test=members-company-member-email]",
        transform: (_, doc) => {
          const div = doc.createElement("div")
          div.innerHTML = "HAPPO_PLACEHOLDER"

          return div
        },
      }
    })

As I mentioned earlier, this used to work perfectly with happo-cypress, but not with happo-playwright. The snapshot itself works without an issue, just the transform seems to be ignored, in the resulting snapshot there is no change.

[trotzig]

Hi @ErikCupal! We looked into this yesterday and it turns out supporting this option for Playwright is a little bit tricky. We found a way but it included using eval and we'd like to avoid that.

It looks like you're using transformDOM to reduce noise. Would it work to use the data-happo-hide="" attribute on the HTML element instead? https://docs.happo.io/docs/hiding-content

[ErikCupal]

Thanks for the suggestion @trotzig yes, data-happo-hide="" works for most of our cases so all fine.

Maybe it would be good to mention it in the docs that transformDOM is not working at the moment with Playwright, for other people who might want to use it.