[Support/Proposition] Use cypress harness in page testing

[jogelin]

We discovered this library which is really useful to test components in an isolated way. We really like it to test our components using component harness architecture but it seems to work only on Components Level. How could we use our harnesses on Pages Level?

Use Case:

<div data-cy="firstname">
    <my-text-component></my-text-component>
</div>
<div data-cy="surname">
    <my-text-component></my-text-component>
</div>

Today we are using a command to access to the parent element then we can select our component:

cy.getBySel('firstname').within(() => cy.get('my-text-component').type('truc'))
cy.getBySel('surname').within(() => cy.get('my-text-component').type('machin'))

Instead of selecting the component by tag, we would like to use our harnesses like:

cy.getBySel('firstname').getHarness(MyTextComponent).insertValue('Truc')
OR
getHarnessBySel('firstname', MyTextComponent).insertValue('Truc')
OR
...

Would it be possible to provide a custom Harness Getter function ? (like getHarness or getRootHarness or getAllHarness). Or to have access to the addHarnessMethodsToChainer to create our own function ?

We tried also the HarnessPredicate approach where we can provide an ancestor but:

• we have to provide a string, we cannot provide an element directly and chain
• it will not work when the selector is on the same level of the component itself <my-text-component data-cy="firstname"></my-text-component>