使用Puppeteer,Mocha和Chai在html标记属性中存在文本

Question

我开始使用这些技术(包括Javascript),所以,一个初学者的问题.我正在努力弄清楚如何断言HTML属性中的给定文本是否符合预期.

HTML代码段:

<input name="8hv3a" type="radio" id="email-optout-8hv3a" value="1|optin|out" data-com.user-edited="yes">

到目前为止,这是我的.it功能,使用了Mochai,Puppeteer和Chai(为了清晰起见,设置和拆卸已被省略:

  it('opt out of email', async function () {

        await page.setDefaultNavigationTimeout();
        await page.waitForSelector('.widget-title');
        const frame = page.frames().find(frame => frame.name() === 'iframe');
        const emailOptOutButton = await frame.$('#email-optout-8hv3a');
        await emailOptOutButton.click();
        const emailOptOutConfirmedValue = await frame.$('#email-optout-8hv3a', e => e.getAttribute('data-com.user-edited'))
        expect(emailOptOutConfirmedValue).to.include('yes')


    })

一切都在点击事件之前一直有效,但我的断言显然是错误的.错误是:

 AssertionError: object tested must be an array, a map, an object, a set, a string, or a weakset, but object given

我试过了

    it('opt out of email', async function () {

    await page.setDefaultNavigationTimeout();
    await page.waitForSelector('.widget-title');
    const frame = page.frames().find(frame => frame.name() === 'iframe');
    const emailOptOutButton = await frame.$('#email-optout-8hv3a');
    await emailOptOutButton.click();
    await page.$eval.emailOptOutConfirmedValue.getAttribute('data-com.user-edited')
    expect(emailOptOutConfirmedValue).to.include('yes')


})

这使:

  TypeError: Cannot read property 'getAttribute' of undefined

并且:

 it('opt out of email', async function () {

    await page.setDefaultNavigationTimeout();
    await page.waitForSelector('.widget-title');
    const frame = page.frames().find(frame => frame.name() === 'iframe');
    const emailOptOutButton = await frame.$('#email-optout-8hv3a');
    await emailOptOutButton.click();
    const emailOptOutConfirmedValue = await frame.$('#email-optout-8hv3a', e => e.getAttribute('data-com.user-edited'))
    assert.equal(emailOptOutConfirmedValue, 'yes')


})

这使:

ReferenceError: assert is not defined

正如我所说,我是初学者所以请任何帮助表示赞赏!

Answer 1

这段代码是错误的：

const emailOptOutConfirmedValue = await frame.$('#email-optout-8hv3a', e => e.getAttribute('data-com.user-edited'))
expect(emailOptOutConfirmedValue).to.include('yes')

你正在使用frame.$(selector). 请注意它如何只需要一个参数。第二个参数被忽略，并且您的调用返回 DOM 元素的句柄，这会导致expect(...).to.include(...)失败并抱怨它无法测试该内容。

你应该改用frame.$eval(selector, pageFunction[, ...args]) 。此调用将调用作为应用选择器结果的第二个参数传递的函数。所以代码应该是：

const emailOptOutConfirmedValue = await frame.$eval('#email-optout-8hv3a', e => e.getAttribute('data-com.user-edited'))
expect(emailOptOutConfirmedValue).to.include('yes')

我在上面完整地保留了您的测试，但在我看来，您在这里寻找的是属性的特定值，所以我将使用此测试：

expect(emailOptOutConfirmedValue).to.equal('yes')

如果属性的值为 ，则包含测试将通过baryesfoo。