Add support for Playwright Component and E2E Testing

packages/e2e-cypress/src/templates/base/src/components/QuasarCheckComponents.vue

@@ -1,9 +1,9 @@
 <template>
-  <q-checkbox v-model="checked" data-cy="checkbox" />
-  <q-toggle v-model="toggled" data-cy="toggle" />
+  <q-checkbox v-model="checked" data-cy="checkbox" data-testid="checkbox" />
+  <q-toggle v-model="toggled" data-cy="toggle" data-testid="toggle" />
 
-  <q-radio v-model="selected" val="Value1" data-cy="radio-1">Value1</q-radio>
-  <q-radio v-model="selected" val="Value2" data-cy="radio-2">Value2</q-radio>
+  <q-radio v-model="selected" val="Value1" data-cy="radio-1" data-testid="radio-1">Value1</q-radio>
+  <q-radio v-model="selected" val="Value2" data-cy="radio-2" data-testid="radio-2">Value2</q-radio>
 </template>
 
 <script<% if (shouldSupportTypeScript) { %> lang="ts"<% } %>>

packages/e2e-cypress/src/templates/base/src/components/QuasarDark.vue

@@ -1,13 +1,32 @@
 <template>
   <q-card data-cy="dark-card" :dark="$q.dark.isActive">
     {{ $q.dark.isActive ? 'Dark ' : 'Light' }} content
+
+    <q-btn label="Toggle Dark Mode" data-testid="dark-mode-toggle-button" @click="toggleNightMode" />
   </q-card>
+
 </template>
 
 <script<% if (shouldSupportTypeScript) { %> lang="ts"<% } %>>
 import { defineComponent } from 'vue';
+import { useQuasar } from 'quasar';
 
 export default defineComponent({
   name: 'QuasarDark',
+  setup() {
+    const $q = useQuasar();
+
+    // TODO: Refactor the Cypress test so that it does not need to test on the instance. Let's avoid such
+    // tests in e2e and component tests. It's preferable to have buttons that perform the task than to directly
+    // call those methods on the instance. Moreover, Playwright does not encourage nor support access to the instance.
+    // See https://kentcdodds.com/blog/testing-implementation-details
+    function toggleNightMode() {
+      $q.dark.set(!$q.dark.isActive);
+    }
+
+    return {
+      toggleNightMode
+    };
+  },
 });
 </script>

packages/e2e-cypress/src/templates/base/src/components/QuasarDate.vue

@@ -1,11 +1,12 @@
 <template>
-  <q-date v-model="date" data-cy="date-picker" />
+  <q-date v-model="date" data-cy="date-picker" data-testid="date-picker" />
 
   <div>
     <q-input v-model="date" label="Scegli data">
       <template #append>
         <q-btn
           data-cy="open-date-picker-popup-button"
+          data-testid="open-date-picker-popup-button"
           icon="event"
           flat
           round
@@ -14,7 +15,7 @@
       </template>
     </q-input>
     <q-dialog ref="dateDialogRef">
-      <q-date v-model="date" @update:model-value="dateDialogRef.hide()" />
+      <q-date v-model="date" data-testid="date-proxy" @update:model-value="dateDialogRef.hide()" />
     </q-dialog>
   </div>
 

packages/e2e-cypress/src/templates/base/src/components/QuasarDialog.vue

@@ -8,6 +8,7 @@
       <q-card-actions align="right">
         <q-btn
           data-cy="ok-button"
+          data-testid="ok-button"
           color="primary"
           label="OK"
           @click="onOKClick"

packages/e2e-cypress/src/templates/base/src/components/QuasarDrawer.vue

@@ -6,13 +6,14 @@
     :breakpoint="700"
     elevated
     data-cy="drawer"
+    data-testid="drawer"
     class="bg-primary text-white"
   >
     <q-scroll-area class="fit">
       <div class="q-pa-sm">
         <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
       </div>
-      <q-btn data-cy="button">Am I on screen?</q-btn>
+      <q-btn data-cy="button" data-testid="button">Am I on screen?</q-btn>
     </q-scroll-area>
   </q-drawer>
 </template>

packages/e2e-cypress/src/templates/base/src/components/QuasarMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn data-cy="open-menu-btn" label="Open menu">
+  <q-btn data-cy="open-menu-btn" data-testid="open-menu-btn" label="Open menu">
     <q-menu>
       <q-list>
         <q-item v-close-popup clickable>
@@ -19,4 +19,4 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'QuasarMenu',
 });
-</script>
+</script>

packages/e2e-cypress/src/templates/base/src/components/QuasarPageSticky.vue

@@ -1,6 +1,6 @@
 <template>
   <q-page-sticky position="bottom-right" :offset="[18, 18]">
-    <q-btn data-cy="button" rounded color="accent" icon="arrow_forward">
+    <q-btn data-cy="button" data-testid="button" rounded color="accent" icon="arrow_forward">
       {{ title }}
     </q-btn>
   </q-page-sticky>

packages/e2e-cypress/src/templates/base/src/components/QuasarSelect.vue

@@ -2,14 +2,15 @@
   <q-select
     v-model="selected"
     data-cy="select"
+    data-testid="select"
     label="test options selection"
     :options="options"
     :loading="loading"
     :disable="disable"
     :multiple="multiple"
   />
 
-  <span data-cy="select-value">{{ selected }}</span>
+  <span data-cy="select-value" data-testid="select-value">{{ selected }}</span>
 </template>
 
 <script<% if (shouldSupportTypeScript) { %> lang="ts"<% } %>>

packages/e2e-cypress/src/templates/base/src/components/QuasarTooltip.vue

@@ -4,6 +4,7 @@
     <q-tooltip
       v-model="showTooltip"
       data-cy="tooltip"
+      data-testid="tooltip"
       class="bg-red"
       :offset="[10, 10]"
     >

packages/e2e-playwright/.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+.thumbs.db
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+dist