test: improve observer tests

tests/platform/mutation-observer/index.html

@@ -106,21 +106,34 @@ <h1>MutationObserver</h1>
                 targetNode.textContent = '';
               }
             });
+
+            document.body.className = 'completed';
           })();
         </script>
         <script>
           (function () {
+            let step = 0;
+            function nextStep() {
+              step++;
+              const elm = document.getElementById('testMutationObserver');
+              elm.classList.add('step' + step);
+              const testStep = document.getElementById('testStep');
+              testStep.textContent = 'step' + step;
+            }
+
             const targetNode = document.getElementById('target');
             const buttonAttr = document.getElementById('buttonAttr');
 
             buttonAttr.addEventListener('click', () => {
               targetNode.setAttribute('mutate', rand());
+              nextStep();
             });
 
             const buttonChildList = document.getElementById('buttonChildList');
             buttonChildList.addEventListener('click', () => {
               targetNode.textContent = '';
               targetNode.appendChild(document.createTextNode(rand()));
+              nextStep();
             });
 
             function rand() {
@@ -131,6 +144,8 @@ <h1>MutationObserver</h1>
       </li>
     </ul>
 
+    <div id="testStep"></div>
+
     <p><a href="/">All Tests</a></p>
   </body>
 </html>

tests/platform/mutation-observer/mutation-observer.spec.ts

@@ -3,6 +3,8 @@ import { test, expect } from '@playwright/test';
 test('mutation-observer', async ({ page }) => {
   await page.goto('/platform/mutation-observer/');
 
+  await page.waitForSelector('.completed');
+
   const buttonObserve = page.locator('#buttonObserve');
   const buttonAttr = page.locator('#buttonAttr');
   const buttonChildList = page.locator('#buttonChildList');
@@ -18,9 +20,11 @@ test('mutation-observer', async ({ page }) => {
   await buttonObserve.click();
 
   await buttonAttr.click();
+  await page.waitForSelector('.step1');
   await expect(testMutationObserver).toHaveText('attributes');
 
   await buttonChildList.click();
+  await page.waitForSelector('.step2');
   await expect(testMutationObserver).toHaveText('childList');
 
   await buttonObserve.click();

tests/platform/resize-observer/index.html

@@ -121,7 +121,7 @@ <h1>ResizeObserver</h1>
               nextStep();
             });
 
-            document.body.className = 'completed'
+            document.body.className = 'completed';
           })();
         </script>
       </li>