[Question] How to select vue component's data property

I have a slider element QSlider which has data -> model equal to 8. I have selected the component using

sliders = page.query_selector_all("_vue=QSlider")
sliders[0]

but not sure how can I get model value and modify it. Would appreciate any kind of help thanks

[aslushnikov]

The goal here is to be able to have access to a DOM element to check some of its properties. Analogous to doing something like this:

@protozoo You can do this already using locator.evaluate:

const handle = page.locator(`_vue=QSlider`);
const isGood = await handle.evaluate(myVueEnabledDOMElement => {
  let elementVueInstance = myVueEnabledDOMElement.__vue__;
  let checkedPropertyValue = elementVueInstance.counter;
  return checkedPropertyValue == expectedValue;
});

As far as I understand, this should address your needs!

[protozoo]

Extendig @AbhimanyuAryan 's question: The goal here is to be able to have access to a DOM element to check some of its properties. Analogous to doing something like this:

function checkVueElementProperty(){
  let expectedValue = 55;
  let myVueEnabledDOMElement = document.getElementById( "myComponentX" );
  let elementVueInstance = myVueEnabledDOMElement.__vue__;
  let checkedPropertyValue = elementVueInstance.counter;
  return checkedPropertyValue == expectedValue;
}

So, in summary, how to get “direct” access to a DOM element and then to its JS properties. This isn’t necessarily restricted to Vue cases, although in our case we are interested in testing Vue components internal state.

Thanks!