I have built a webapp with https://quasar.dev/ that looks as the following:
It is a very simple page with the toolbar component. I have tried to write a test that should validate, if the component q-toolbar-title
contains text Databaker.
The created test:
import {ClientFunction} from 'testcafe';
import VueSelector from 'testcafe-vue-selectors';
fixture`Getting Started`
.page`http://127.0.0.1:3000/`;
const getLocation = ClientFunction(() => document.location.href);
test(`Validate page title`, async t => {
const toolbarTitle = VueSelector(`q-toolbar-title`);
const textTitle = await toolbarTitle.getVue();
await t
.expect(getLocation()).contains(`oic.dev.example.io`)
.typeText(`#username`, `user@example.io`)
.typeText(`#password`, `password`)
.click(`#kc-login`)
.wait(3000)
.expect(textTitle.computed.text)
.eql(`Databaker`);
});
the part
.expect(getLocation()).contains(`oic.dev.example.io`)
.typeText(`#username`, `user@example.io`)
.typeText(`#password`, `password`)
.click(`#kc-login`)
works as expect but the test failed because of
✖ Validate page title
1) An error occurred in getVue code:
TypeError: Cannot read property '__vue__' of undefined
Browser: Chrome 85.0.4183.121 / Linux 0.0
7 |const getLocation = ClientFunction(() => document.location.href);
8 |
9 |test(`Validate page title`, async t => {
10 |
11 | const toolbarTitle = VueSelector(`q-toolbar-title`);
> 12 | const textTitle = await toolbarTitle.getVue();
13 |
14 | console.log(toolbarTitle.withText);
15 |
16 | await t
17 | .expect(getLocation()).contains(`oic.dev.databaker.io`)
The Vue template:
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-toolbar-title>
Databaker
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
<router-view/>
</q-page-container>
</q-layout>
</template
How to write the test correctly?
Aucun commentaire:
Enregistrer un commentaire