[Question] Access vue 2 instance of component

Hey there, is there currently a way to access eg. the data, methods or anything of a mounted component or in general the vue instance of the component in the tests?

Something like this (I know this would return the component, not the vue instance but just to illustrate it a bit):

Test.vue

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      myValue: 'test',
    };
  },
  methods: {
    test() {
      return true;
    },
  }
}
</script>

test.spec.jsx

import {
  test,
  expect,
} from '@playwright/experimental-ct-vue2';
import Test from './Test.vue';

test('my test', async ({ mount }) => {
  const component = await mount(<Test />);
  console.log(component.myValue);
  expect(component.test()).toBeTruthy();
});

[sand4rt]

IMO exposing the component instance (for any framework) leads to testing implementation details. I would instead resemble the tests to the way the software is used. This will eventually lead to better tests that won’t break as quickly if you refactor something and helps preventing false negative and false positive test results. I highly recommend reading this article from the creator of testing library, where he explains this in more detail.

@oliver-freudrich-packwise Can you share the code of a real use case you are trying to test? Then i can help you with an example of what the test could look like?

[sand4rt]

Keep in mind that i’m not a core member of Playwright and i’m not sure if they are on the same page with this. Vue Test Utils works okay, they just added features that will send you down the wrong path if you’re not careful😕.

This is the current existing documentation on component testing: https://playwright.dev/docs/test-components. I agree that this is not very comprehensive yet. Not sure if possible but maybe you or debs-obrien can help out with this?

Would be good to read the other blog posts from Kent as well: https://kentcdodds.com/blog?q=testing. I find them very useful.

No problem!