Refactoring/inputs jest to playwright

[lukasbriza]

Rewrite jest tests for Inputs components into playwright.

I have a few questions for @mbohal or @bedrich-schindler.

When running full-page screenshots (in the case of SelectField), the rendering seems inconsistent. The images for the full page are re-generated every time I run the tests with the --with-update flag. Also, when testing components within the FormLayout context, they look oddly rendered when the horizontal layout is applied.

Should we address/fix this issue directly in this PR? Do you consider it a bug?

Additionally, would you like to add tests for ButtonGroup and InputGroup contexts at the component level, similar to how we are testing the FormLayout context?

Closes #607

[lukasbriza]

I had to add await page.waitForTimeout(500); inside onBeforeSnapshot, and also include the { maxDiffPixelRatio: 0.001 } option in toMatchSnapshot within the full-page block to capture snapshots of the opened SelectField. These tests are getting rewritten on every update, but I have no idea why. I think it might be some inconsistency or an issue with the slider option and how it's rendered in the browser or Playwright.

[bedrich-schindler]

I had to add await page.waitForTimeout(500); inside onBeforeSnapshot, and also include the { maxDiffPixelRatio: 0.001 } option in toMatchSnapshot within the full-page block to capture snapshots of the opened SelectField. These tests are getting rewritten on every update, but I have no idea why. I think it might be some inconsistency or an issue with the slider option and how it's rendered in the browser or Playwright.

@lukasbriza, I suggested change over there:

Did you try it?

[lukasbriza]

I had to add await page.waitForTimeout(500); inside onBeforeSnapshot, and also include the { maxDiffPixelRatio: 0.001 } option in toMatchSnapshot within the full-page block to capture snapshots of the opened SelectField. These tests are getting rewritten on every update, but I have no idea why. I think it might be some inconsistency or an issue with the slider option and how it's rendered in the browser or Playwright.

@lukasbriza, I suggested change over there:

Did you try it?

Yes i tried it. I added { animations: "disabled" } into every screenshot method in SelectField tests and it did not worked on that issue. Snapshots are still rewritten every time. Adding { maxDiffPixelRatio: 0.001 } was only thing that helped in combination with timeout on 500ms.

[bedrich-schindler]

I had to add await page.waitForTimeout(500); inside onBeforeSnapshot, and also include the { maxDiffPixelRatio: 0.001 } option in toMatchSnapshot within the full-page block to capture snapshots of the opened SelectField. These tests are getting rewritten on every update, but I have no idea why. I think it might be some inconsistency or an issue with the slider option and how it's rendered in the browser or Playwright.

I have tried several things but unfortunately, I have the same problem as you report. I do not know why it worked when I tried it with disabled animations. It may be the flakiness.

That being said, please create bug report into the Playwright. You must provide reproducible demo with the bug and detailed description what is wrong. I would recommend to paste few examples of snapshots so that they can clearly see the error. I would also inform them about our attempts (disabling animations, timeout, waiting for documents.fonts....) I already removed the reproducible repository from my Github Profile, but I have local copy of that. I will send it to you so you can just replace my issue with this bug and sent it do Playwright team so than can review that and hopefully fix that or give us a hint.

Example of the bug report: microsoft/playwright#34441

Please, link the issue into the code and comment out the full page tests that are broken due to this. Also, create issue in React UI repository that is linked to Playwright issue and that should fix those commented tests. Please, add this link into the code as well.