I'm having problems using the selector to specify an html input.

I want that Playwright identifies an Whatsapp TEXTBOX so that i can use it, but there is no ID, or even a CSS element that i can specify.

At first, i tried using the comannd detailed on DOC, getting the elements from the website.

<div title="Search text box" role="textbox"  contenteditable="true" data-tab="3" dir="ltr"></div>

But i can't specify the search TEXTBOX to fill, with the example:

element.fill("contact name")

I don't know if this is a syntax problem. Is there another way to specify this element?

CodePudding user response：

Problem is, that these are not text or input elements, but divs, which inner HTML is being changed when typing. You can check that, by opening WhatsApp in the browser, opening the dev tools, and typing something into the field.

You can identify those divs via the title attribute, as those seem to be unique: //div[@title="Search text box"]

Playwright cannot change the inner HTML of a div, but you could do via Javascript, which you let evaluate by Playwright.

The Javascript would be (you can evaluate that in the dev tools' console):

document.querySelector('div[title^=\'Search text box\']').innerHTML = 'contact name';

To evaluate this from your python code:

page.evaluate('() => document.querySelector('div[title^=\'Search text box\']').innerHTML = 'contact name'')

See documentation for more details: https://playwright.dev/python/docs/evaluating