fix: enable e2e tests for --bare (#674)

Author: cexbrayat

.github/workflows/ci.yml

@@ -167,8 +167,7 @@ jobs:
 
       - name: Run e2e test script
         working-directory: ./playground
-        # bare templates can't pass e2e tests because their page structures don't match the example tests
-        run: pnpm --filter '*${{ matrix.e2e-framework }}*' --filter '!*bare*' --workspace-concurrency 1 test:e2e
+        run: pnpm --filter '*${{ matrix.e2e-framework }}*' --workspace-concurrency 1 test:e2e
 
       # FIXME: Component testing is failing in CI after running too many tests.
       # The workaround in https://github.com/cypress-io/cypress/issues/22208 is not working.

template/bare/base/src/App.vue

@@ -1,7 +1,7 @@
 <script setup></script>
 
 <template>
-  <h1>Hello World</h1>
+  <h1>You did it!</h1>
 </template>
 
 <style scoped></style>

template/bare/cypress-ct/src/__tests__/App.cy.js

@@ -3,6 +3,6 @@ import App from '../App.vue'
 describe('App', () => {
   it('mounts and renders properly', () => {
     cy.mount(App)
-    cy.get('h1').should('contain', 'Hello World')
+    cy.get('h1').should('contain', 'You did it!')
   })
 })

template/bare/nightwatch-ct/src/__tests__/App.spec.js

@@ -7,7 +7,7 @@ describe('App', function () {
     const appComponent = await browser.mountComponent('/src/App.vue');
 
     browser.expect.element(appComponent).to.be.present;
-    browser.expect.element('h1').text.to.contain('Hello World');
+    browser.expect.element('h1').text.to.contain('You did it!');
   })
 
   after((browser) => browser.end())

template/bare/typescript/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>Hello World</h1>
+  <h1>You did it!</h1>
 </template>
 
 <style scoped></style>

template/bare/vitest/src/__tests__/App.spec.js

@@ -6,6 +6,6 @@ import App from '../App.vue'
 describe('App', () => {
   it('mounts renders properly', () => {
     const wrapper = mount(App)
-    expect(wrapper.text()).toContain('Hello World')
+    expect(wrapper.text()).toContain('You did it!')
   })
 })

template/config/nightwatch/tests/e2e/example.js

@@ -4,7 +4,7 @@ describe('My First Test', function () {
   })
 
   it('visits the app root url', function () {
-    browser.assert.textContains('.green', 'You did it!')
+    browser.assert.textContains('h1', 'You did it!')
   })
 
   after((browser) => browser.end())

template/config/playwright/e2e/vue.spec.js

@@ -4,5 +4,5 @@ import { test, expect } from '@playwright/test';
 // https://playwright.dev/docs/intro
 test('visits the app root url', async ({ page }) => {
   await page.goto('/');
-  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+  await expect(page.locator('h1')).toHaveText('You did it!');
 })

template/config/playwright/e2e/vue.spec.ts

@@ -4,5 +4,5 @@ import { test, expect } from '@playwright/test';
 // https://playwright.dev/docs/intro
 test('visits the app root url', async ({ page }) => {
   await page.goto('/');
-  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+  await expect(page.locator('h1')).toHaveText('You did it!');
 })