How to define input field (Selector) under condition to exist text in other class in the same div

I'm having trouble defining the field for typing text into

this.requiredField = Selector('input').withAttribute('required');

in a condition where the validation label is

this.requiredLabel = Selector('.form-control-warning').withText('Required field cannot be left blank');

There are in class=”col-10” – see below

I am not interested in such a filed where there is no text Required field cannot be left blank in. form-control-warning

I need it because I must type text in each field with a label: 'Required field cannot be left blank"
I created sth like this:

while (await epgBoard.requiredLabel.exists)
{

await t.typeText(epgBoard.emptyRequiredField, 'ff')
}

I have no idea how to define such selector

this.emptyRequiredField =
find in .col-10 -> input withAtrribute required where . form-control-warning has text Required field cannot be left blank

Could sb help me with this matter?

The withText method filters existing DOM Nodes, which contain the specified text. For instance:

<validation-message>Required field cannot be left blank</validation-message>

However, your markup does not seem to contain nodes with the specified text.

Instead, you can obtain the value of your input elements by using the DOM Node State. See if the value property meets your requirements. For instance:

const requiredFields = Selector('input').withAttribute('required');
const requiredFieldsCount = await requiredFields.count;

for (let i = 0; i < requiredFieldsCount; i++) {
	const field = requiredFields.nth(i);
	const fieldValue = await field.value;
	if (!fieldValue)
		await t.typeText(field, "dummy text");
}

See also:

Obtain Element State

Enumerate Elements Identified by a Selector