Search code examples
javascripttestingautomationpuppeteer

puppeteer check value input after type

I'm using puppeteer, pptr-testing-library and I'm trying to open google website and type in search input "tutorials" and after that I want to check that the value in the input is the same as I type "tutorials" but I get an error

 Unable to find an element with the text: tutorials".

enter image description here

The code:

import { PuppeteerScreenRecorder } from "puppeteer-screen-recorder";
import puppeteer, { Browser, ElementHandle, Page } from "puppeteer";
import { getDocument, queries } from "pptr-testing-library";
const { findByRole } = queries;
let page, recorder, browser;
beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: true,
  });

  page = await browser.newPage();
  recorder = new PuppeteerScreenRecorder(page);
  await recorder.start(`./screenshots/e2e-test-${Date.now()}.mp4`);
  await page.goto("https://www.google.com");
  console.log({ page });
});

describe("type in search input", () => {
  it("should check search input value", async () => {
    console.log("enter test");
    const $document = await getDocument(page);
    console.log("doc is", $document);
    const $searchInput = await findByRole($document, "combobox");
    await $searchInput.type("tutorials");
    console.log({ $searchInput });
    expect(await queries.findAllByText($document, 'tutorials"')).toBeTruthy();
    await recorder.stop();
    await browser.close();
  });
});

In addition when I print the logs of doc and searchInput I get empty object:

enter image description here

How to get the value of the input after typing?

Solution

  • Root cause

    There is a typographical error in the following line of code:

    expect(await queries.findAllByText($document, 'tutorials"')).toBeTruthy();

    Please, note the «redundant» double quotation mark: 'tutorials"'.

    Please, note that the error message also contains the «redundant» double quotation mark:

    Evaluation failed: Error: Unable to find an element with the text: tutorials". This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Solution

    Correct the line by removing the «redundant» double quotation mark:

    expect(await queries.findAllByText($document, 'tutorials')).toBeTruthy();

    It would be better to extract and reuse the constant. For example:

    <…>
const searchInputString = 'tutorials';
await $searchInput.type(searchInputString);
<…>
expect(await queries.findAllByText($document, searchInputString)).toBeTruthy();
<…>

    Answers to questions

    Question #1

    How to get the value of the input after typing?

    how can I get the value from searchInput?

    The Page.evaluate() method may be used to get property values of an element.

    For example, to get the value of the value property of the input element:

    const expectedSearchInputValue = 'tutorials';
await $searchInput.type(expectedSearchInputValue);

const searchInputValue = await page.evaluate(element => element.value, $searchInput);
console.log("Search input value:", searchInputValue);
expect(searchInputValue).toEqual(expectedSearchInputValue);

    Please, note the argument of the Page.evaluate() method call — the arrow function.

    • The element parameter of the arrow function is an instance of the HTMLInputElement interface because the element handle corresponds to the input element.

    Additional references

    Question #2

    and why the searchInput in empty object?

    Because:

    • The $searchInput variable contains an instance of the ElementHandle class.
    • Basically, it is just a handle, not the element itself.