fix (playwright): webServer host

Author: firestar300

Diff for: examples/accessible-accordion/index.html

@@ -637,12 +637,12 @@ <h2>Code</h2>
             </p>
             <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
         </div>
-        
+
         <script type="module">
-            import { Accordion } from '../../index.js'
+            import { Accordion } from '../../be-a11y.js'
             import '../../src/css/index.css'
             import './style.css'
-            
+
             Accordion.preset = {
                 '#accordion-demo-1': {},
                 '#accordion-demo-2': { hasAnimation: true },

Diff for: examples/accessible-dropdown/index.html

@@ -98,7 +98,7 @@ <h2>Code</h2>
         </div>
 
         <script type="module">
-            import { Dropdown } from '../../index.js'
+            import { Dropdown } from '../../be-a11y.js'
             import '../../src/css/index.css'
             import './style.css'
 

Diff for: examples/accessible-modal/index.html

@@ -68,9 +68,9 @@ <h2 class="modal__title">Add delivery address</h2>
 
         <h3>Modal button but only for &lt; 1024px devices</h3>
 
-        <button class="modal-btn--demo-2" type="button" aria-controls="demo-2">Add billing address</button>
+        <button class="modal-btn--demo-2" type="button">Add billing address</button>
 
-        <div class="modal modal--mobile" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
+        <div class="modal modal--mobile modal--demo-2" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
             <div class="modal__inner">
                 <h2 class="modal__title">Add billing address</h2>
 
@@ -126,7 +126,7 @@ <h2>Code</h2>
         </div>
 
         <script type="module">
-            import { Modal } from '../../index.js'
+            import { Modal } from '../../be-a11y.js'
             import '../../src/css/index.css'
             import './style.css'
 

Diff for: examples/accessible-slider/index.html

@@ -57,7 +57,7 @@ <h2>Code</h2>
     </div>
 
     <script type="module">
-        import { Slider } from '../../index.js'
+        import { Slider } from '../../be-a11y.js'
         import '../../src/css/index.css'
         import './style.css'
 

Diff for: examples/accessible-tabs/index.html

@@ -93,7 +93,7 @@ <h2>Code</h2>
         </div>
 
         <script type="module">
-            import { Tabs } from '../../index.js'
+            import { Tabs } from '../../be-a11y.js'
             import '../../src/css/index.css'
             import './style.css'
 

Diff for: examples/accessible-toggle/index.html

@@ -66,7 +66,7 @@ <h2>Code</h2>
         </div>
 
         <script type="module">
-            import { Toggle } from '../../index.js'
+            import { Toggle } from '../../be-a11y.js'
             import '../../src/css/index.css'
             import './style.css'
 

Diff for: playwright.config.ts

@@ -1,5 +1,4 @@
 import {PlaywrightTestConfig, devices} from '@playwright/test'
-const viteConfig = require('./vite.config.ts')
 
 const config: PlaywrightTestConfig = {
   projects: [
@@ -9,15 +8,11 @@ const config: PlaywrightTestConfig = {
     },
   ],
   webServer: {
-    command: 'npx vite',
-    url: 'http://127.0.0.1:5173/',
-    reuseExistingServer: true,
+    command: process.env.CI ? 'npx vite preview --port 5173' : 'npx vite dev',
+    url: 'http://localhost:5173/',
+    reuseExistingServer: !process.env.CI,
     timeout: 2000,
   },
-  use: {
-    ctPort: 8081,
-    ctViteConfig: viteConfig,
-  },
 }
 
 module.exports = config

Diff for: src/classes/Accordion.test.js

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('Accordion', () => {
   test.beforeEach(async({page}) => {
-    await page.goto('http://127.0.0.1:5173/examples/accessible-accordion/index.html')
+    await page.goto('http://localhost:5173/examples/accessible-accordion/index.html')
   })
 
   test('Click the first tab accordion, expect the first focusable element in the panel is focused.', async ({page}) => {

Diff for: src/classes/Dropdown.test.js

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('Dropdown', () => {
   test.beforeEach(async({page}) => {
-    await page.goto('http://127.0.0.1:5173/examples/accessible-dropdown/index.html')
+    await page.goto('http://localhost:5173/examples/accessible-dropdown/index.html')
   })
 
   test('Click on the dropdown button, expect the listbox is visible.', async ({page}) => {

Diff for: src/classes/Modal.test.js

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('Modal', () => {
   test.beforeEach(async({page}) => {
-    await page.goto('http://127.0.0.1:5173/examples/accessible-modal/index.html')
+    await page.goto('http://localhost:5173/examples/accessible-modal/index.html')
   })
 
   test('Click on a dialog trigger button, expect the modal dialog is visible.', async ({page}) => {

Diff for: src/classes/Slider.test.js

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('Slider', () => {
   test.beforeEach(async({page}) => {
-    await page.goto('http://127.0.0.1:5173/examples/accessible-slider/index.html')
+    await page.goto('http://localhost:5173/examples/accessible-slider/index.html')
   })
 
   test('Click on next button, expect "data-dir" attribute is set to 1.', async ({page}) => {

Diff for: src/classes/Tabs.test.js

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('Tabs', () => {
   test.beforeEach(async({page}) => {
-    await page.goto('http://127.0.0.1:5173/examples/accessible-tabs/index.html')
+    await page.goto('http://localhost:5173/examples/accessible-tabs/index.html')
   })
 
   test('Click on a tab, expect aria-selected attribute to be "true".', async ({page}) => {

Diff for: src/classes/Toggle.test.js

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'
 
 test.describe('Toggle', () => {
   test.beforeEach(async({page}) => {
-    await page.goto('http://127.0.0.1:5173/examples/accessible-toggle/index.html')
+    await page.goto('http://localhost:5173/examples/accessible-toggle/index.html')
   })
 
   test('Click on a toggle button, expect the content is visible.', async ({page}) => {