Add some ids to ease element locating in e2e tests

This commit is contained in:
Bubka 2023-08-30 14:37:59 +02:00
parent d7942b4233
commit 5f6bbbd156
15 changed files with 23 additions and 19 deletions

View File

@ -12,7 +12,7 @@
</div>
<div v-else class="content has-text-centered">
<div v-if="$route.meta.showAbout === true" class="is-size-6">
<router-link :to="{ name: 'about' }" class="has-text-grey">
<router-link id="lnkAbout" :to="{ name: 'about' }" class="has-text-grey">
2FAuth <span class="has-text-weight-bold">v{{ appVersion }}</span>
</router-link>
</div>

View File

@ -14,7 +14,7 @@
</div>
<div v-if="this.showcloseButton" class="fullscreen-footer">
<!-- Close button -->
<button ref="closeModalButton" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="closeModal">
<button id="btnClose" ref="closeModalButton" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="closeModal">
{{ $t('commons.close') }}
</button>
</div>

View File

@ -6,7 +6,7 @@
<p class="is-size-4 has-ellipsis" :class="$root.showDarkMode ? 'has-text-grey-light' : 'has-text-grey'">{{ internal_service }}</p>
<p class="is-size-6 has-ellipsis" :class="$root.showDarkMode ? 'has-text-grey' : 'has-text-grey-light'">{{ internal_account }}</p>
<p>
<span role="log" ref="otp" tabindex="0" class="otp is-size-1 is-clickable px-3" :class="$root.showDarkMode ? 'has-text-white' : 'has-text-grey-dark'" @click="copyOTP(internal_password, true)" @keyup.enter="copyOTP(internal_password, true)" :title="$t('commons.copy_to_clipboard')">
<span id="otp" role="log" ref="otp" tabindex="0" class="otp is-size-1 is-clickable px-3" :class="$root.showDarkMode ? 'has-text-white' : 'has-text-grey-dark'" @click="copyOTP(internal_password, true)" @keyup.enter="copyOTP(internal_password, true)" :title="$t('commons.copy_to_clipboard')">
{{ displayPwd(this.internal_password) }}
</span>
</p>

View File

@ -1,7 +1,7 @@
<template>
<div>
<!-- Group switch -->
<div class="container groups" v-if="showGroupSwitch">
<div id="groupSwitch" class="container groups" v-if="showGroupSwitch">
<div class="columns is-centered">
<div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div class="columns is-multiline">
@ -19,7 +19,7 @@
<vue-footer :showButtons="true">
<!-- Close Group switch button -->
<p class="control">
<button class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click="closeGroupSwitch()">{{ $t('commons.close') }}</button>
<button id="btnClose" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click="closeGroupSwitch()">{{ $t('commons.close') }}</button>
</p>
</vue-footer>
</div>
@ -56,7 +56,7 @@
</p>
<!-- Cancel button -->
<p class="control">
<button class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click="showGroupSelector = false">{{ $t('commons.cancel') }}</button>
<button id="btnCancel" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click="showGroupSelector = false">{{ $t('commons.cancel') }}</button>
</p>
</vue-footer>
</div>
@ -101,13 +101,13 @@
<div v-else class="has-text-centered">
<div class="columns">
<div class="column" v-if="!showGroupSwitch">
<button :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : !$root.showDarkMode}" @click.stop="toggleGroupSwitch">
<button id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : !$root.showDarkMode}" @click.stop="toggleGroupSwitch">
{{ activeGroupName }} ({{ filteredAccounts.length }})&nbsp;
<font-awesome-icon :icon="['fas', 'caret-down']" />
</button>
</div>
<div class="column" v-else>
<button :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : !$root.showDarkMode}" @click.stop="toggleGroupSwitch">
<button id="btnHideGroupSwitch" :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : !$root.showDarkMode}" @click.stop="toggleGroupSwitch">
{{ $t('groups.select_accounts_to_show') }}
</button>
</div>

View File

@ -24,7 +24,7 @@
</div>
<div class="fullscreen-footer">
<!-- Cancel button -->
<button class="button is-large is-warning is-rounded" @click="exitStream()">
<button id="btnCancel" class="button is-large is-warning is-rounded" @click="exitStream()">
{{ $t('commons.cancel') }}
</button>
</div>

View File

@ -37,7 +37,7 @@
<vue-footer :showButtons="true">
<!-- close button -->
<p class="control">
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}">{{ $t('commons.close') }}</router-link>
<router-link id="btnClose" :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}">{{ $t('commons.close') }}</router-link>
</p>
</vue-footer>
</responsive-width-wrapper>

View File

@ -39,7 +39,7 @@
</div>
<!-- link to import view -->
<div v-if="showImportButton" class="block has-text-link">
<router-link class="button is-link is-outlined is-rounded" :to="{ name: 'importAccounts' }" >
<router-link id="btnImport" class="button is-link is-outlined is-rounded" :to="{ name: 'importAccounts' }" >
{{ $t('twofaccounts.import.import') }}
</router-link>
</div>
@ -49,7 +49,7 @@
<vue-footer :showButtons="true" >
<!-- back button -->
<p class="control" v-if="accountCount > 0">
<router-link class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" :to="{ name: returnToView }" >
<router-link id="lnkBack" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" :to="{ name: returnToView }" >
{{ $t('commons.back') }}
</router-link>
</p>

View File

@ -41,6 +41,7 @@
<!-- close button -->
<p class="control">
<router-link
id="btnClose"
:to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
class="button is-rounded"
:class="{'is-dark' : $root.showDarkMode}"

View File

@ -39,7 +39,7 @@
</div>
</div>
<div v-if="isFetching && tokens.length === 0" class="has-text-centered mt-6">
<span class="is-size-4">
<span id="icnSpinner" class="is-size-4">
<font-awesome-icon :icon="['fas', 'spinner']" spin />
</span>
</div>
@ -48,6 +48,7 @@
<!-- close button -->
<p class="control">
<router-link
id="btnClose"
:to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
class="button is-rounded"
:class="{'is-dark' : $root.showDarkMode}"

View File

@ -73,6 +73,7 @@
<!-- Close button -->
<p class="control">
<router-link
id="btnClose"
:to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
class="button is-rounded"
:class="{'is-dark' : $root.showDarkMode}"

View File

@ -31,7 +31,7 @@
</div>
</div>
<div v-if="isFetching && credentials.length === 0" class="has-text-centered mt-6">
<span class="is-size-4">
<span id="icnSpinner" class="is-size-4">
<font-awesome-icon :icon="['fas', 'spinner']" spin />
</span>
</div>
@ -48,6 +48,7 @@
<!-- close button -->
<p class="control">
<router-link
id="btnClose"
:to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
class="button is-rounded"
:class="{'is-dark' : $root.showDarkMode}"

View File

@ -30,7 +30,7 @@
<v-button :isLoading="form.isBusy" >{{ $t('commons.save') }}</v-button>
</div>
<div class="control">
<button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
<button id="btnCancel" type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
</div>
</div>
</div>
@ -133,7 +133,7 @@
<button type="button" class="button is-success is-rounded" @click="previewAccount">{{ $t('twofaccounts.forms.test') }}</button>
</p>
<p class="control">
<button type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
<button id="btnCancel" type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
</p>
</vue-footer>
</form>

View File

@ -117,7 +117,7 @@
<button type="button" class="button is-success is-rounded" @click="previewAccount">{{ $t('twofaccounts.forms.test') }}</button>
</p>
<p class="control">
<button type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
<button id="btnCancel" type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
</p>
</vue-footer>
</form>

View File

@ -124,7 +124,7 @@
</p>
<!-- close button -->
<p class="control">
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
<router-link :id="importableCount > 0 ? 'btnCancel' : 'btnClose'" :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
</p>
</vue-footer>
</responsive-width-wrapper>

View File

@ -8,7 +8,7 @@
</div>
<div class="fullscreen-footer">
<!-- Close button -->
<button class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="$router.push({name: 'accounts', params: {initialEditMode: true}});">
<button id="btnClose" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="$router.push({name: 'accounts', params: {initialEditMode: true}});">
{{ $t('commons.close') }}
</button>
</div>