samedi 3 octobre 2020

How to get the text of the component q-toolbar-title?

I have built a webapp with https://quasar.dev/ that looks as the following: Screenshot from 2020-10-02 20-30-38

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