Утверждать наличие текста в атрибуте тега html, используя Puppeteer, Mocha и Chai

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.