Hover flyout menu doesn't pop up when testing with Playwright

I'm trying to run a test script for opening the apple.com page and click on an item on the flyout menu, but the flyout menu won't pop up when the mouse cursor is hovering over it, resulting in the item (Apple TV Support) that I need to click not being visible. The script works for some other websites, but not Apple. How could I solve this?

Here's my test script

import { test, expect } from '@playwright/test';

  test('test', async ({ page }) => {
  await page.goto('https://www.apple.com/');
  await page.getByText('TV and Home').first().hover()
  await page.getByText('Apple TV Support').first().click()
});

Here's the error I'm getting

Error: locator.click: Test timeout of 10000ms exceeded.
Call log:
  - waiting for getByText('Apple TV Support').first()
  - locator resolved to <a class="globalnav-submenu-link" data-      analytics-exit-link="true" data-analytics-title="apple tv support" href="https://support.apple.com/apple-tv?cid=gn-ols-appletv-psp-prodfly">Apple TV Support</a>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is not visible
      - retrying click action
      - waiting 20ms
    2 × waiting for element to be visible, enabled and stable
      - element is not visible
      - retrying click action
      - waiting 100ms
    11 × waiting for element to be visible, enabled and stable
      - element is not visible
      - retrying click action
      - waiting 500ms

Solution

I'm not entirely sure what's going on with this site, but hovering the body before hovering the menu works:

import { test, expect } from "@playwright/test"; // ^1.52.0

test("test", async ({ page }) => {
  await page.goto("https://www.apple.com/");
  await page.locator("body").hover();
  await page.getByText("TV & Home").first().hover()
  await page.getByText("Apple TV Support").click()
  await expect(page).toHaveURL("https://support.apple.com/tv");
});

I'll update if I can come up with a better solution or can explain why this works.

That said, if you're automating a third-party site, it's more reliable to navigate directly to the destination page:

await page.goto("https://support.apple.com/tv", { waitUntil: "commit" });