test: add test for 'about' youtube modal

[YaelChen]

Description

I added a test that makes sure the YouTube modal can play,
but I had a problem with the HAR file.

It will probably not pass, but I need a place to discuss it in the PR comments section :)

[YaelChen]

It worked when I ran in --debug mode, but failed without it.
-ui mode made me realize it was probably because of the HAR file,
I re-recorded it but it broke a bunch of other tests.
I didn't push the HAR, didn't really know what I broke there.

[github-actions]

Preview: https://s3.amazonaws.com/noam-gaash.co.il/12667122270/open-bus/270/index.html
Preview Storybook: https://s3.amazonaws.com/noam-gaash.co.il/12667122270/open-bus/270/storybook/index.html
Test Report (if available): 'https://s3.amazonaws.com/noam-gaash.co.il/12667122270/open-bus/3af17bf926161808f793bc3f08538baf1afa722f/test-results/index.html'

[NoamGaash]

The har file recording does not include youtube - it's limited on line # 9 to url: /stride-api/.
When you read playButtonLabel, it can happen before the video starts playing therefore the pause button isn't available yet. This situation called a "race condition" - it behaves differently because sometimes the website is slower than the test, and sometimes it's faster.

The safe approach for these cases would be to wait until the play action is completed -

  test('About YouTube modal plays video', async ({ page }) => {
    await page.goto('/about')
    const videoFrame = page.frameLocator('iframe[title="YouTube video player"]')
    const playButton = videoFrame.getByLabel('Play', { exact: true })
    await playButton.click()
    await playButton.waitFor({ state: 'hidden' })
    const video = videoFrame.locator('video')
    await video.hover()
    await expect(videoFrame.getByLabel('Pause')).toBeVisible()
  })

[YaelChen]

it seems to wait forever for the hover method, though locally for me it does run successfully.

  115 |     await playButton.waitFor({ state: 'hidden' })
  116 |     const video = videoFrame.locator('video')
> 117 |     await video.hover()
      |                 ^
  118 |     await expect(videoFrame.getByLabel('Pause')).toBeVisible()
  119 |   })

[NoamGaash]

Seems like YouTube are blocking bots - and they are right 😅 - our automation is a bot indeed.

So maybe we should avoid testing youtube for now 🙃 . If youtube will have a bug, it's not our to fix.

https://s3.amazonaws.com/noam-gaash.co.il/12534395670/open-bus/0ae794929d8fff601adecc13835a83fbbabdb06c/test-results/trace/index.html?trace=https://s3.amazonaws.com/noam-gaash.co.il/12534395670/open-bus/0ae794929d8fff601adecc13835a83fbbabdb06c/test-results/data/65b9171c0e38c6594f3af9e2978312198809d02e.zip

[NoamGaash]

the toBeVisible assertion can be a better fit for this use case - if the element is not visible (for example because it's loading or has entrance animation) it will wait for it to appear

https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-visible

[NoamGaash]

toHaveAttribute could also be a better choice here - up to you :)

[YaelChen]

I tried to fix it and made a mess pushing :)
I'll look at it in the morning when my brain will show more vital signs.