使用Selenium/Protractor测试时获取网站注入的application/ld+json脚本

• 你已经调用waitForAngularEnabled(false)关闭了Protractor默认的Angular渲染自动等待机制，页面加载、动态脚本注入的速度受测试环境网络、资源加载速度影响，硬写3秒睡眠无法覆盖所有场景
• 原有代码没有做显式等待，直接定位元素就拉取innerHTML，若application/ld+json的script标签还没被注入到DOM，或者内容还没加载完成，就会返回null

1. 改造getLDJson方法，增加显式等待 #

修改site.po.ts，使用Protractor内置的ExpectedConditions等待元素存在、且内容非空后再读取解析：

// site.po.ts (po == page object)
import { ExpectedConditions } from 'protractor';

export class Site {
    async getLDJson(timeout: number = 10000) {
        // 定位目标script元素
        const ldJsonScriptEl = browser.element(by.xpath('//script[@type="application/ld+json"]'));
        // 等待元素出现在DOM中，超时时间10秒可自行调整
        await browser.wait(ExpectedConditions.presenceOf(ldJsonScriptEl), timeout, 'ld+json脚本未加载');
        // 等待元素innerHTML不为空，防止标签已存在但内容还没注入
        await browser.wait(async () => {
            const content = await ldJsonScriptEl.getAttribute('innerHTML');
            return content?.trim().length > 0;
        }, timeout, 'ld+json脚本内容为空');
        // 读取内容解析返回
        const ldJsonScript = await ldJsonScriptEl.getAttribute('innerHTML');
        return JSON.parse(ldJsonScript.trim());
    }
}

2. 移除不稳定的硬睡眠，优化页面跳转逻辑 #

首先删除测试代码里的browser.sleep(3000)：

// dealership.test.ts
describe('Dealership Site', () => {
    const site: Site = new Site();
    const cu: ContactUsPage = new ContactUsPage();

    beforeAll(async () => {
        await cu.goToDealership();
        // 移除硬睡眠，getLDJson内已经做了显式等待
        const ldJson = await site.getLDJson();
        // 后续测试逻辑直接使用ldJson即可
    });
});

可以额外优化跳转方法，跳转后等待页面加载完成再返回，进一步提升稳定性：

//contact_us.po.ts
async goToDealership(dealerName: string = 'wilsonsaw', nextPage: string = "") {
    await browser.waitForAngularEnabled(false);
    var url = this.composeUrl(dealerName);

    const currentUrl = await browser.getCurrentUrl();
    url = `${url}${nextPage}`;

    if (url !== currentUrl) {
        await browser.navigate().to(url);
        // 等待页面加载完成
        await browser.wait(async () => {
            return browser.executeScript('return document.readyState') === 'complete';
        }, 10000, '页面加载超时');
    }
}

• 可以给JSON.parse加try-catch捕获异常，避免脚本内容格式错误直接导致用例崩溃
• 如果页面存在多个application/ld+json标签，调整xpath定位逻辑指定要抓取的对应标签即可

内容的提问来源于stack exchange，提问作者MaylorTaylor