Assert presence of text in an html tag attribute using Puppeteer, Mocha and Chai

Question

I'm beginning my journey with these technologies (including Javascript), so, a beginners question. I'm struggling to work out how to assert that the given text within an HTML attribute is as expected.

The HTML snippet:

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

Here is my .it function thus far, using Mochai, Puppeteer and Chai (setup and teardown elided for clarity:

  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')


    })

Everything works up until the click event, but my assertion is clearly wrong. The error is:

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

I've tried

    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')


})

Which gives:

  TypeError: Cannot read property 'getAttribute' of undefined

And also:

 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')


})

Which gives:

ReferenceError: assert is not defined

As I said, I'm a beginner so go any help appreciated!

Answer 1

This code is wrong:

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

You're using frame.$(selector). Notice how it takes only one argument. The second argument is ignored and your call returns a handle to a DOM element, which causes the expect(...).to.include(...) to fail with a complaint that it cannot test that thing.

You should use frame.$eval(selector, pageFunction[, ...args]) instead. This call will call the function passed as a second argument on the result of applying the selector. So the code should be:

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

I've left your test intact above, but it seems to me what you'd be looking for here is for a specific value for the attribute, so I'd use this test:

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

The inclusion test would pass if the attribute's value is baryesfoo.