Automating mat-option in testcafe - testing

Question

Tried automating dropdown using the below methods but the dropdown values couldn't be selected.
Method 1:
const comboOption = Selector("mat-option").child("span").withExactText("Hello");
await t.click(comboOption);
Method 2:
ClientFunction(() => {
document.getElementsByClassName('mat-option-text')[0].innerText = 'Hello';
document.getElementsByClassName('mat-option-text')[0].click();
return "Hello";});
The mat-option tag is not within mat-select. It is outside mat-select and within div tag.
Are there other ways to achieve automating mat-option ?

Answer 1

Thank you for the code snippets.
As far as I understand, you are trying to click an option element in another select element.
I created a simple test that should perform the steps you described:
import { Selector } from 'testcafe';
fixture`Getting Started`
.page`http://devexpress.github.io/testcafe/example`;
const selectElement = Selector('#preferred-interface');
const optionElement = selectElement.find('option');
test('My first test', async t => {
await t
.click(selectElement)
.click(optionElement.withText('Both'))
.expect(selectElement.value).eql('Both');
});
If I misunderstood your question, could you please share a simple example of your .html and a detailed description of
what you want to do in the test and which results you expect?