puppeteer check value input after type-CodePudding

The

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:

How to get the value of the input after typing?

CodePudding user response：

**Hope it helps, Just set the value of input like this:(Example** await page.$eval('#email', el => el.value = '[email protected]'); **Here is an example of using it on Wikipedia:** const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://en.wikipedia.org', {waitUntil: 'networkidle2'}); await page.waitFor('input[name=search]'); // await page.type('input[name=search]', 'Adenosine triphosphate'); await page.$eval('input[name=search]', el => el.value = 'Adenosine triphosphate'); await page.click('input[type="submit"]'); await page.waitForSelector('#mw-content-text'); const text = await page.evaluate(() => { const anchor = document.querySelector('#mw-content-text'); return anchor.textContent; }); console.log(text); await browser.close(); })(); Thank You!!

CodePudding user response：

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

Tests, which may serve as examples. pptr-testing-library/extend.test.ts at v0.7.0 · testing-library/pptr-testing-library

Tests, which may serve as examples. puppeteer/evaluation.spec.ts at v17.1.3 · puppeteer/puppeteer.

Additional related method. Page.evaluateHandle() method.

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.