const CDP = require('chrome-remote-interface');

(async function () {
    const client = await CDP();

    const { Page, DOM, CSS } = client;

    try {
        await Page.enable();
        await DOM.enable();
        await CSS.enable();

        await Page.navigate({ url: 'http://127.0.0.1:8889/test/testPage.html' });
        await Page.loadEventFired();

        const { root: { nodeId } } = await DOM.getDocument();

        const { nodeId: elementId } = await DOM.querySelector({
            nodeId,
            selector: '#register'
        });

        if (!elementId) {
            console.log('未找到匹配的元素');
            return;
        }

        const { computedStyle } = await CSS.getComputedStyleForNode({ nodeId: elementId });
        console.log('计算样式:', computedStyle);

        computedStyle.forEach(style => {
            console.log(`属性: ${style.name}, 值: ${style.value}`);
        });

    } catch (err) {
        console.error('出现错误:', err);
    } finally {
        await client.close();
    }
})();