test: fix comprehensive demo tests

Author: ScriptedAlchemy

comprehensive-demo-react16/e2e/checkApp1.spec.ts

@@ -9,7 +9,7 @@ test.describe('Comprehensive Demo App1', () => {
 
     const demoLinks = ['Main', 'UI Library', 'Dialog', 'Svelte Page', 'Routing'];
     for (const name of demoLinks) {
-      await expect(page.getByRole('link', { name })).toBeVisible();
+      await expect(page.getByRole('button', { name })).toBeVisible();
     }
 
     const appLinks = [
@@ -20,7 +20,7 @@ test.describe('Comprehensive Demo App1', () => {
       { name: 'App #5', href: 'http://localhost:3005' },
     ];
     for (const { name, href } of appLinks) {
-      await expect(page.getByRole('link', { name })).toHaveAttribute('href', href);
+      await expect(page.locator('a', { hasText: name })).toHaveAttribute('href', href);
     }
 
     await expect(page.getByRole('heading', { name: 'Module Federation Demo' })).toBeVisible();

comprehensive-demo-react16/e2e/checkApp2.spec.ts

@@ -5,7 +5,7 @@ const base = 'http://localhost:3002';
 test.describe('Comprehensive Demo App2', () => {
   test('renders blocks, dialog and tabs', async ({ page }) => {
     await page.goto(base);
-    await expect(page.locator('header')).toHaveCSS('background-color', 'rgb(63, 81, 181)');
+    await expect(page.locator('header').first()).toHaveCSS('background-color', 'rgb(63, 81, 181)');
     await expect(page.locator('.jss2')).toHaveCSS('background-color', 'rgb(250, 250, 250)');
     await expect(page.locator('.jss3')).toHaveCSS('background-color', 'rgb(255, 255, 255)');
 

comprehensive-demo-react16/e2e/checkApplications.spec.ts

@@ -12,7 +12,7 @@ apps.forEach(({ port, name, selector, text }) => {
   test.describe(name, () => {
     test(`build and run ${name}`, async ({ page }) => {
       await page.goto(`http://localhost:${port}`);
-      await expect(page.locator(selector)).toContainText(text);
+      await expect(page.locator(selector, { hasText: text })).toBeVisible();
     });
   });
 });