base/test/atomic_check.spec.js

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

test('Capability demo page atomic tests verification', async ({ page }) => {
    page.on('console', msg => console.log('BROWSER:', msg.text()));

    await page.goto('/test/capability.html');
    // Wait for the framework to initialize and finish initial renders
    await page.waitForTimeout(3000);

    const testResults = await page.evaluate(() => {
        const getTexts = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.textContent.trim());
        const getColors = (sel) => Array.from(document.querySelectorAll(sel)).map(el => el.style.color);

        return {
            textBinding: getTexts('.test-title-node'),
            textColor: getColors('.test-title-node'),
            ifTrue: document.querySelector('.alert-success')?.textContent.trim(),
            ifFalse: document.querySelector('.alert-danger')?.textContent.trim(),
            eachItems: getTexts('.list-group-item'),
            nestedEachInIf: getTexts('.badge.bg-secondary'),
            nestedIfInEach: getTexts('.p-2.border.rounded.bg-white.shadow-sm')
        };
    });

    console.log('Atomic Test Results:', JSON.stringify(testResults, null, 2));

    expect(testResults.textBinding).toContain('Synchronous State Ready');
    expect(testResults.ifTrue).toBe('已激活 ($if="true")');
    expect(testResults.ifFalse).toBeUndefined();
    expect(testResults.eachItems).toHaveLength(3);
    expect(testResults.nestedEachInIf).toHaveLength(3);
    expect(testResults.nestedIfInEach).toHaveLength(5); // All members initially visible
});