fix(e2e): improve reliability of Playwright tests (#6753)

- Add proper element visibility waits before interactions
- Ensure Overview tab is activated on page navigation
- Increase timeout values for better stability
- Fix element state checking in page objects

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <[email protected]>

Author: valorkin

apps/ngx-bootstrap-docs-e2e/src/support/accordion.po.ts

@@ -38,10 +38,12 @@ export class AccordionPo extends BasePo {
   }
 
   async clickOnAccordionGroup(baseSelector: string, itemIndex: number) {
-    await this.page
+    const accordionButton = this.page
       .locator(baseSelector + ' accordion-group button')
-      .nth(itemIndex)
-      .click();
+      .nth(itemIndex);
+    
+    await accordionButton.waitFor({ state: 'visible', timeout: 10000 });
+    await accordionButton.click();
   }
 
   async expectItemContentVisible(baseSelector: string, itemIndex: number, visible: boolean) {

apps/ngx-bootstrap-docs-e2e/src/support/alerts.po.ts

@@ -31,10 +31,10 @@ export class AlertsPo extends BasePo {
     local: '.alert-md-local',
   };
 
-  async expectAlertVisible(baseSelector: string, alertType: string, visible = true, timeout = 5000) {
-    await expect(await this.page
-      .locator(baseSelector + ` ${this.alertType[alertType]}`)
-    ).toBeVisible({ timeout: timeout, visible: visible });
+  async expectAlertVisible(baseSelector: string, alertType: string, visible = true, timeout = 10000) {
+    const alertElement = this.page.locator(baseSelector + ` ${this.alertType[alertType]}`);
+    await alertElement.waitFor({ state: visible ? 'visible' : 'hidden', timeout: timeout });
+    await expect(alertElement).toBeVisible({ visible: visible });
   }
 
   async expectBtnNotExist(baseSelector: string, buttonName: string) {

apps/ngx-bootstrap-docs-e2e/src/support/base.po.ts

@@ -16,6 +16,13 @@ export class BasePo {
   async navigateTo() {
     const bsVersionRoute = process.env['bsVersion'] ? `?_bsVersion=bs${process.env['bsVersion']}` : '';
     await this.page.goto(this.pageUrl + bsVersionRoute);
+    await this.page.waitForLoadState('domcontentloaded');
+    // Ensure Overview tab is active by clicking on it
+    const overviewTab = this.page.locator('a[aria-selected="false"]').getByText('Overview');
+    if (await overviewTab.isVisible()) {
+      await overviewTab.click();
+      await this.page.waitForTimeout(1000); // Wait for tab content to load
+    }
   }
 
   async scrollToMenu(menuTxt: string) {

apps/ngx-bootstrap-docs-e2e/src/support/buttons.po.ts

@@ -29,11 +29,13 @@ export class ButtonsPo extends BasePo {
   };
 
   async expectBtnVisible(baseSelector: string, btnSelector: string, btnName: string, btnNumber?: number) {
-    await expect(await this.page
+    const btnElement = this.page
       .locator(baseSelector + ` ${btnSelector}`)
       .getByText(btnName)
-      .nth(btnNumber ? btnNumber : 0)
-    ).toBeVisible();
+      .nth(btnNumber ? btnNumber : 0);
+    
+    await btnElement.waitFor({ state: 'visible', timeout: 10000 });
+    await expect(btnElement).toBeVisible();
   }
 
   async expectBtnEnabled(baseSelector: string, btnName: string, enabled = true, btnNumber?: number) {