bug(MatSelectHarness): getOptions() returns results from another harness

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

1. Add two mat-selects with the same selector (e.g. id=“test”) but different ancestor selectors to a page. Both should be multiple-selects. Add 3 options in the first select and no options in the second.
2. Write code that sets options of second select whenever selection within first select changes, so that the second select always contains only the options that are selected in the first select.
3. Use test harness to click one option in first select, then use following code on the second test harness to check that only the single option is available:

    await select.open();
    const optionLabels = Promise.all((await select.getOptions()).map(option => option.getText()));

Expected Behavior

What behavior were you expecting to see?

• There should only be one option in the second select.

Actual Behavior

What behavior did you actually see?

• The options returned by the second select are the same as in the first - i.e. 3 options - even though when inspecting the component instance, I have verified that the options are correct (just one option).

Environment

• Angular: 9.1.7
• CDK/Material: 9.2.3
• Browser(s): Chrome v80
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 10.15

[crisbeto]

But I’m wondering, if I were to use an attribute other than ID for the selector would that really solve the problem?

Yes, that will solve the problem. We use the ID to tie a select to its overlay panel. The panel uses a scheme that looks like {{ id of the select }}-panel.

Also since we don’t have control over any of the other attributes, and as there is currently no support in the harness for e.g. finding a select by label, ID is what we have to go on.

The harnesses support any valid CSS selector so you could use an attribute or a class to distinguish between the selects.

[mmalerba]

I don’t think we want to add anything just to handle duplicate id’s. It sounds like you should open a bug against ng-dynamic-forms