FTablePageObject

Innehåll

FTablePageObject()
cell()
el()
expandButton()
footer()
header()
headerDescription()
headerTitle()
rows()
selectHeaderInput()
selectInput()

Använd FTablePageObject för att hämta information relaterat till FTable komponenten.

FTablePageObject()

Syntax

new FTablePageObject(selector);

Parametrar

selector: string Optional

Selector till det FTable-element som avses testas.

Du kan med fördel använda direktivet v-test för din selector.

Default: .table-ng.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.cell({ row: 1, col: 2 }).should("contain.text", "Foo");
table.cell({ row: 2, col: 2 }).should("contain.text", "Bar");
table.cell({ row: 3, col: 2 }).should("contain.text", "Baz");

cell()

Hämtar en tabellcell.

Både rad och kolumn är 1-indexerade.

Kolumnnumreringen inkluderar kolumnen för expanderingsknapparna i en expanderbar tabell eller kolumnen för checkboxarna/radioknapparna i en valbar tabell.

För expanderbara rader beror radnummer på om rader är expanderade eller ej. Om man anger rad 2 när rad 1 är kollapsad så refererar det till nästa ej expanderade rad under rad 1. Men om rad 1 är expanderad refererar rad 2 till den första expanderade raden under rad 1.

Syntax

cell(descriptor);

Parametrar

descriptor

Rad och kolumn

row: number: Radnummer (1-indexerat).
col: number: Kolumnnummer (1-indexerat).

Returvärde

HTMLTableCellElement med tabellcellen beskriven av descriptor.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.cell({ row: 1, col: 2 }).should("contain.text", "Foo");
table.cell({ row: 2, col: 2 }).should("contain.text", "Bar");
table.cell({ row: 3, col: 2 }).should("contain.text", "Baz");

el()

Hämtar tabellens root-element.

Syntax

el();

Returvärde

HTMLElement för tabellen.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.el().should("exist");

expandButton()

Hämtar expanderingsknappen i en expanderbar tabell.

Radnumreringen är 1-indexerade och inkluderar expanderade rader. Notera att expanderade rader ej har någon expanderingsknapp och bör därför inte väljas med denna metod.

Syntax

expandButton(row);

Parametrar

row: number: Radnummer (1-indexerat).

Returvärde

HTMLButtonElement med expanderingsknappen beskriven av row.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows expandable-attribute="nested"></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.expandButton(1).click();
table.cell({ row: 2, col: 3 }).should("contain.text", "Expanded 1");
table.cell({ row: 3, col: 3 }).should("contain.text", "Expanded 2");

Hämtar tabellens footer.

Syntax

footer();

Returvärde

HTMLTableSectionElement för tabellens footer.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows>
        <template #footer> My awesome footer </template>
    </f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.footer().should("contain.text", "My awesome footer");

Hämtar en cell i tabellhuvudet.

Kolumnumreringen är 1-indexerad och inkluderar kolumnen för expanderingsknapparna i en expanderbar tabell och kolumnen för checkboxarna/radioknapparna i en valbar tabell.

Syntax

header(col);

Parametrar

col: number: Kolumnnummer (1-indexerat).

Returvärde

HTMLTableCellElement med en cell från tabellhuvudet beskriven av col.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.header(1).should("contain.text", "ID");
table.header(2).should("contain.text", "Namn");

headerDescription()

Hämtar en kolumnbeskrivning från tabellhuvudet.

Kolumnumreringen är 1-indexerad och inkluderar kolumnen för expanderingsknapparna i en expanderbar tabell och kolumnen för checkboxarna/radioknapparna i en valbar tabell.

Syntax

header(col);

Parametrar

col: number: Kolumnnummer (1-indexerat).

Returvärde

HTMLElement som innehåller kolumnbeskrivning beskriven av col.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.headerTitle(1).should("contain.text", "ID");
table.headerTitle(2).should("contain.text", "Namn");

headerTitle()

Hämtar en kolumntitel från tabellhuvudet.

Kolumnumreringen är 1-indexerad och inkluderar kolumnen för expanderingsknapparna i en expanderbar tabell och kolumnen för checkboxarna/radioknapparna i en valbar tabell.

Syntax

header(col);

Parametrar

col: number: Kolumnnummer (1-indexerat).

Returvärde

HTMLElement som innehåller en kolumntitel beskriven av col.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.headerTitle(1).should("contain.text", "ID");
table.headerTitle(2).should("contain.text", "Namn");

rows()

Hämtar alla synliga rader i tabellen.

Inkluderar expanderade rader.

Syntax

rows();

Returvärde

HTMLTableRowElement för alla synliga rader.

Exempel

<template>
    <f-table v-test="'table'" :columns :rows></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.rows().should("have.length", 3);

selectHeaderInput()

Hämtar checkboxen för bulkoperation från kolumnhuvudet för en flervalstabell.

Notera att denna metod kan endast användas om tabellen är en flervalstabell (den använder selectable="multi").

Syntax

selectHeaderInput();

Returvärde

HTMLInputElement med checkboxen för bulkoperation.

Exempel

<template>
    <f-table
        v-model:selected-rows="selectedRows"
        v-test="'table'"
        :columns
        :rows
        selectable="multi"
        key-attribute="id"
    ></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.selectHeaderInput().click();
table.selectInput(1).should("be.checked");
table.selectInput(2).should("be.checked");
table.selectInput(3).should("be.checked");

selectInput()

Hämtar inmatning för att välja en rad i en valbar tabell.

För en flervalstabell så är inmatningselementet en checkbox, annars en radioknapp.

Radnumreringen är 1-indexerad och inkluderar expanderade rader.

Syntax

selectInput(row);

Parametrar

row: number: Radnummer (1-indexerat).

Returvärde

HTMLInputElement med checkbox eller radioknapp för en valbar tabell.

Exempel

<template>
    <f-table
        v-model:selected-rows="selectedRows"
        v-test="'table'"
        :columns
        :rows
        selectable="multi"
        key-attribute="id"
    ></f-table>
</template>

const table = new FTablePageObject("[data-test=table]");
table.selectInput(1).click();
table.selectInput(1).should("be.checked");
table.selectInput(2).should("not.be.checked");
table.selectInput(3).should("not.be.checked");