Problem with selecting a specific web element with Playwright in Python

Question

I'm having problems using the selector to specify a HTML input.

I want Playwright to identify a 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 command detailed on DOC, getting the elements from the website.

<div title="Search text box" role="textbox" class="_13NKt copyable-text selectable-text" 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?

Answer 1

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