add selector at the end of the page and wait for it before testing

components/AuditForm.vue

@@ -59,7 +59,7 @@ if (baseAuditId) {
  } else {
  setValues({
  pages: baseAudit.config.noAxe
- ? [{ selector: '', url: '' }]
+ ? [{ selector: '', endSelector: '', url: '' }]
  : baseAudit.config.pages,
  title: baseAudit.config.title,
  project: baseAudit.projects?.id,
@@ -267,7 +267,7 @@ const onAuditProcessingDialogClose = (resetAuditForm: boolean = true) => {
  </div>
 
  <div class="w-full">
- <label :for="`selector-${index}`">HTML Selector</label>
+ <label :for="`selector-${index}`">HTML Selector to</label>
  <InputText
  :id="`selector-${index}`"
  v-model="page.value.selector"
@@ -289,6 +289,33 @@ const onAuditProcessingDialogClose = (resetAuditForm: boolean = true) => {
  selector allowed. If empty whole document will be tested.
  </small>
  </div>
+ <div class="col-start-2 w-full">
+ <label :for="`selector-end-${index}`"
+ >HTML Selector at the end of the page</label
+ >
+ <InputText
+ :id="`selector-end-${index}`"
+ v-model="page.value.endSelector"
+ :name="`pages[${index}].endSelector`"
+ class="w-full"
+ :aria-describedby="`selector-end-help-${index}`"
+ :data-testid="`audit-page-selector-end-field-${index}`"
+ :class="[
+ {
+ 'p-invalid':
+ (errors[`pages[${index}].endSelector` as `pages.${number}.endSelector`] ||
+ errors[`pages[${index}]` as `pages.${number}`]) &&
+ isSubmitted,
+ },
+ ]"
+ />
+ <small :id="`selector-end-help-${index}`">
+ Sometimes dynamic page is not fully loaded when automatic
+ tests are conducted. To make sure all elements on the page are
+ available, provide the element at the end of the page, use
+ .class or #id to choose selector, just one selector allowed.
+ </small>
+ </div>
  <small
  v-if="errors[`pages[${index}]` as `pages.${number}`] && isSubmitted"
  class="p-error w-full"
@@ -321,7 +348,7 @@ const onAuditProcessingDialogClose = (resetAuditForm: boolean = true) => {
  :pt="{
  icon: { 'aria-hidden': true },
  }"
- @click="pushPage({ url: '', selector: '' })"
+ @click="pushPage({ url: '', selector: '', endSelector: '' })"
  />
  </AccordionTab>
  <AccordionTab header="General">

pages/audit/report/[id].vue

@@ -174,6 +174,14 @@ const completeReport = async () => {
  {{ page.selector }}
  </code>
  </template>
+ <template v-if="page.endSelector?.length">
+ - selector of the element at the end of the page:
+ <code
+ class="break-words rounded-md bg-gray-100 px-2 py-1"
+ >
+ {{ page.endSelector }}
+ </code>
+ </template>
  </li>
  </ul>
  </template>

server/axe-runner/core.ts

@@ -60,7 +60,7 @@ export const doTest = async function (
 
  await page.setViewportSize(size)
 
- for await (const { url, selector } of pages) {
+ for await (const { url, selector, endSelector } of pages) {
  let result: AxeResults | undefined
  const errors: ResultError[] = []
 
@@ -73,6 +73,24 @@ export const doTest = async function (
 
  const axe = await new AxeBuilder({ page })
 
+ if (endSelector) {
+ await page
+ .locator(endSelector)
+ .waitFor()
+ .then(async () => {
+ await page.evaluate(() =>
+ window.scrollTo(0, document.body.scrollHeight)
+ )
+ })
+ .catch(() =>
+ errors.push({
+ url,
+ message:
+ 'Selector of element at the end of the page does not exist.',
+ })
+ )
+ }
+
  if (selector) {
  await page
  .locator(selector)
@@ -95,7 +113,9 @@ export const doTest = async function (
  result = await axe.analyze()
  }
 
- results.push(parseResults(auditId, size, errors, result))
+ results.push(
+ parseResults(auditId, size, errors, result, selector, endSelector)
+ )
  }
 
  if (process.env.dev) {

server/axe-runner/utils.ts

@@ -57,11 +57,13 @@ export const parseResults = function (
  size: ViewportSize,
  errors?: ResultError[],
  results?: AxeResults,
- selector?: string
+ selector?: string,
+ endSelector?: string
 ): TestResult {
  return {
  audit_id: auditId,
  selector: selector || null,
+ end_selector: endSelector || null,
  size: `${size.width},${size.height}`,
  results: results ? trimResults(results) : null,
  errors,

sql/02_tables/05_axe.sql

@@ -4,6 +4,7 @@ create table axe (
  created_at timestamp default current_timestamp not null,
  audit_id serial references public.audits on delete cascade not null,
  selector text,
+ end_selector text,
  size text,
  results JSONB not null DEFAULT '{}'::jsonb,
  form_data JSONB not null DEFAULT '{}'::jsonb,

types/audit.ts

@@ -3,6 +3,7 @@ import type { auditTemplate } from '~/data/auditTemplate'
 
 export interface Page {
  selector?: string | undefined
+ endSelector?: string | undefined
  url: string
 }
 

types/axe-runner.ts

@@ -19,6 +19,7 @@ export type ResultError = {
 export interface TestResult {
  audit_id: string
  selector: string | null
+ end_selector: string | null
  size: string
  results: TrimmedResults | null
  errors?: ResultError[]
@@ -31,6 +32,7 @@ export type BasicAuth = {
 
 export type Page = {
  selector?: string
+ endSelector?: string
  url: string
 }
 

types/supabase-latest.ts

@@ -70,6 +70,7 @@ export interface Database {
  id: number
  results: Json | null
  selector: string | null
+ end_selector: string | null
  size: string | null
  }
  Insert: {
@@ -80,6 +81,7 @@ export interface Database {
  id?: number
  results?: Json | null
  selector?: string | null
+ end_selector?: string | null
  size?: string | null
  }
  Update: {
@@ -90,6 +92,7 @@ export interface Database {
  id?: number
  results?: Json | null
  selector?: string | null
+ end_selector?: string | null
  size?: string | null
  }
  Relationships: [

types/supabase.ts

@@ -105,6 +105,7 @@ export interface Database {
  results: Results
  errors: Json[] | null
  selector: string | null
+ end_selector: string | null
  size: string | null
  form_data: FormData | null
  }
@@ -114,6 +115,7 @@ export interface Database {
  id?: number
  results?: Results
  selector?: string | null
+ end_selector?: string | null
  size?: string | null
  form_data?: FormData | null
  }
@@ -123,6 +125,7 @@ export interface Database {
  id?: number
  results?: Results
  selector?: string | null
+ end_selector?: string | null
  size?: string | null
  form_data?: FormData | null
  }

validation/schema.ts

@@ -33,10 +33,12 @@ export const auditFormSchema = object({
  object().shape({
  url: string(),
  selector: string(),
+ endSelector: string(),
  })
  )
  .default([
  {
+ endSelector: '',
  selector: '',
  url: '',
  },
@@ -48,12 +50,14 @@ export const auditFormSchema = object({
  .shape({
  url: string().url().required(),
  selector: string(),
+ endSelector: string(),
  })
  .test('isUnique', `The entry is not unique`, function (currentPage) {
  const pages = this.parent
  const count = pages.filter(
  (page: Page) =>
  page.selector === currentPage.selector &&
+ page.endSelector === currentPage.endSelector &&
  page.url === currentPage.url
  ).length
  return count <= 1
@@ -63,6 +67,7 @@ export const auditFormSchema = object({
  .default([
  {
  selector: '',
+ endSelector: '',
  url: '',
  },
  ])