Использовать Puppeteer для проверки формы входа успешно?

Question

Я использую Кукольника. Я хотел бы написать тест, чтобы убедиться, что форма входа в систему на моем сайте работает, и показывает пользователю страницу "Добро пожаловать".

Вот что у меня есть:

  it('should allow the user to log in', async function () {
    await page.click(USERNAME_SELECTOR);
    await page.keyboard.type(CREDS.username);
    await page.click(PASSWORD_SELECTOR);
    await page.keyboard.type(CREDS.password);
    await page.click(BUTTON_SELECTOR);
    await page.waitForNavigation({ waitUntil: 'load' }),
    heading = await page.$eval('h1', heading => heading.innerText);
    expect(heading).to.eql('Welcome');
  });

Тем не менее, это дает мне следующую ошибку:

Error: Timeout of 25000ms exceeded.
For async tests and hooks, ensure "done()" is called;
if returning a Promise, ensure it resolves. 

Если я запускаю тест с установленным false, то я вижу отправляемую форму и загрузку страницы приветствия. Он готов задолго до тайм-аута 25000 мс.

Я вижу, что это await page.waitForNavigation линия, которая терпит неудачу.

Что я делаю неправильно?

Answer 1

Проблема с кодом заключается в том, что код является асинхронным, и нет никакого прямого способа, которым среда тестирования знает, что тест закончен.

Чтобы решить эту проблему, тестовые среды предоставляют метод done в качестве обратного вызова, который может быть вызван после завершения асинхронной задачи, т. Е. В вашем случае, когда завершено ожидание.

Вы можете переписать контрольный пример, как показано ниже

  it('should allow the user to log in', async function (done) {
    await page.click(USERNAME_SELECTOR);
    await page.keyboard.type(CREDS.username);
    await page.click(PASSWORD_SELECTOR);
    await page.keyboard.type(CREDS.password);
    await page.click(BUTTON_SELECTOR);
    await page.waitForNavigation({ waitUntil: 'load' }),
    heading = await page.$eval('h1', heading => heading.innerText);
    expect(heading).to.eql('Welcome');
    done();
  });

Не забудьте добавить функцию done в качестве параметра в функцию теста

асинхронная функция (сделано)

Answer 2

Ты забыл позвонить done() обратный вызов (см. здесь):

  it('should allow the user to log in', async function(done) {
        await page.click(USERNAME_SELECTOR);
        await page.keyboard.type(CREDS.username);
        await page.click(PASSWORD_SELECTOR);
        await page.keyboard.type(CREDS.password);
        await page.click(BUTTON_SELECTOR);
        await page.waitForNavigation({ waitUntil: 'load' }),
        heading = await page.$eval('h1', heading => heading.innerText);
        expect(heading).to.eql('Welcome');
        done();
    }
  });

Я не уверен на 100%, что вы можете определить async function прямо в it вторые аргументы. Вам может понадобиться обратный вызов vanilla и создать внутри него асинхронную функцию:

  it('should allow the user to log in', function(done) {
      (async() => {
        await page.click(USERNAME_SELECTOR);
        await page.keyboard.type(CREDS.username);
        await page.click(PASSWORD_SELECTOR);
        await page.keyboard.type(CREDS.password);
        await page.click(BUTTON_SELECTOR);
        await page.waitForNavigation({ waitUntil: 'load' }),
        heading = await page.$eval('h1', heading => heading.innerText);
        expect(heading).to.eql('Welcome');
        done();
      })()
    }
  });