Vue Selector - How to find a combo element after scrolling

[anon17856038]

Hi,
I'm trying to fill my user's form with data and I have a problem.
There are 3 comboboxes and I fill them by using three steps:
1. Click on the combo to open dropmenu
2. Find the appropriate item by its text
3. Press enter for selection

When the need item is in the end of the menu, window is scrolled and next input can't be found from the test. Error message: "Cannot obtain information about the node because the specified selector does not match any node in the DOM tree."

So, my questions:
1. Could you propose better way to fill these fields? Btw, we use vuejs for frontend.
I've tried testcafe-vue-selectors, but I didn't understand can I fill "value" for a component directly or not. If you can give me an example I would appreciate.
2. How to solve scrolling problem if use my filling method?

[MarinaRukavitsyna]

Hello @viraxslot
It looks like you wish to access an item that has not been rendered yet (e.g. the virtual mode is used or combo data is loaded on demand). If so, would you please provide me with a link to your site and specify the required item so that I can check for an appropriate Selector for you?

[anon17856038]

@MarinaRukavitsyna thanks for your proposal, but I can't share the site. Maybe you could advise something by my test's code.

First version of my test (sometimes failed, sometimes passed):

71 | async fillDocType (docTypeParam) {
72 | await t
73 | .click(this.docType)
> 74 | .click(this.dropdownMenu.find('li').withExactText(docTypeParam));
75 | }

Second version (same problem):

72 | async fillDocType (docTypeParam) {
73 | await t
74 | .click(this.docType)
> 75 | .expect(this.dropdownMenu.visible).ok('Menu is visible')
76 | .click(this.dropdownMenu.find('li').withExactText(docTypeParam));
77 | }

this.dropdownMenu = Selector('ul.dropdown-menu');

I understand that I don't need to use "expect" explicitly, but I thought it could help.

[MarinaRukavitsyna]

Would you please also share your combo box markup with me?

[anon17856038]

@MarinaRukavitsyna

<div class="input-field col s12 m6 l4">
	<div data-v-7c0011e0="" class="combo" value="[object Object]">
		<div data-v-7c0011e0="" id="docType-0" tabindex="0" class="plain-button static-input valid">
			<span data-v-7c0011e0="">Document 1</span>
		</div>
		<label data-v-7c0011e0="" class="active">Doctype</label>
		<ul data-v-7c0011e0="" class="dropdown-menu v-leave v-leave-active">
			<li data-v-7c0011e0="" class="item pointed selected">
        Document 1
			</li>
			<li data-v-7c0011e0="" class="item">Document 2</li>
			<li data-v-7c0011e0="" class="item">Document 3</li>
			<li data-v-7c0011e0="" class="item">Document 4</li>
		</ul>		
	</div>
</div>

this.docType = Selector('div[id^="docType-"]');

[MarinaRukavitsyna]

Try setting the options.timeout option to a bigger value.

If this does not help, please update this VueJS online example, so that I can check for a Selector for the problematic element locally.

[anon17856038]

Thank you, I'll try.