Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

page.evaluate: TypeError: Cannot read properties of undefined (reading 'run') #65

Closed
thomasfischer-his opened this issue Oct 6, 2023 · 7 comments
Closed

page.evaluate: TypeError: Cannot read properties of undefined (reading 'run') #65

thomasfischer-his opened this issue Oct 6, 2023 · 7 comments

Comments

@thomasfischer-his
Copy link

Running the latest a11ywatch/kayle instance in a container as pulled from hub.docker.com, an exception (?) is raised when visiting certain webpages (example: https://www.bolagsverket.se/)

Curl invocation to trigger a scan:

curl --request POST http://localhost:3280/api/scan --header 'Content-Type: application/json' --data-raw '{ "url": "https://www.bolagsverket.se/" }'

Inside the container, the following output is generated inside the container following the curl invocation:

page.evaluate: TypeError: Cannot read properties of undefined (reading 'run')
at eval (eval at evaluate (:202:30), <anonymous>:1:90)
at UtilityScript.evaluate (<anonymous>:204:17)
at UtilityScript.<anonymous> (<anonymous>:1:44)
at o (/usr/src/app/node_modules/kayle/build/kayle.js:1:354)
at s (/usr/src/app/node_modules/kayle/build/kayle.js:1:715)
at async g (/usr/src/app/node_modules/kayle/build/kayle.js:1:1685)

The JSON output returned from the curl invocation does not any accessibility issues on the visited page. A duration of 0 suggests no check was done at all.

{"data":{"domain":"www.bolagsverket.se","url":"https://www.bolagsverket.se/","pageLoadTime":{"duration":0,"durationFormated":"Cached/Extremely Fast"},"lastScanDate":"2023-10-06T12:14:00.079Z","issues":[],"issuesInfo":{"possibleIssuesFixedByCdn":0,"totalIssues":0,"issuesFixedByCdn":0,"errorCount":0,"warningCount":0,"noticeCount":0,"accessScore":0,"issueMeta":{"skipContentIncluded":true}},"online":true},"success":true,"code":200,"message":""}

I am quite certain that my a11ywatch/kayle/curl setup is working correctly otherwise, as I get back sane results for other URLs.
@j-mendez
Copy link
Contributor

j-mendez commented Oct 6, 2023

Hi @thomasfischer-his, there is actually not a container for kayle. The pagemind container pulls in kayle for the audits. I ran kayle locally and was able to get the audit fine. The issue looks like a custom runner maybe was added through the node env? If so the system for pagemind does not have support for this at the moment.

Example of the data below with htmlcs, axe for runners.

{
  documentTitle: 'Bolagsverket',
  pageUrl: 'https://www.bolagsverket.se/',
  issues: [
    {
      context: '<p class="normal">Har du fått mejl med ett ”erbjud...</p>',
      selector: '#svid12_41e70ebc18922543366b0>:nth-child(2)>:nth-child(2)',
      code: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail',
      type: 'error',
      typeCode: 1,
      message: 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.41:1. Recommendation:  change background to #fdfeff.',
      runner: 'htmlcs',
      recurrence: 0
    },
    {
      context: '<p class="normal">Har du fått mejl med ett ”erbjud...</p>',
      selector: '#svid12_41e70ebc18922543366b0>:nth-child(2)>:nth-child(2)',
      code: 'color-contrast',
      type: 'error',
      typeCode: 1,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<img alt="" class="sv-noborder c2186" srcset="/images/18.6c1c4b4a17f538595df1c76/1657622904215/x160p/arsredovisningar.jpg 160w, /images/18.6c1c4b4a17f538595df1c76/1657622904215/arsredovisningar.jpg 309w" sizes="100vw" src="/images/18.6c1c4b4a17f538595...',
      selector: '#svid12_2733cf65187efcf5c7e12e4b>:nth-child(2)',
      code: 'WCAG2AA.Principle1.Guideline1_1.1_1_1.H67.2',
      type: 'warning',
      typeCode: 2,
      message: 'Img element is marked so that it is ignored by Assistive Technology.',
      runner: 'htmlcs',
      recurrence: 0
    },
    {
      context: '<a href="#sidans-innehall" class="lp-skip-to-content">Hoppa till innehåll</a>',
      selector: '#svid12_46f4138717c599ee403ab94d>:nth-child(3)>:nth-child(1)>:nth-child(1)',
      code: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Abs',
      type: 'warning',
      typeCode: 2,
      message: 'This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least 4.5:1.',
      runner: 'htmlcs',
      recurrence: 0
    },
    {
      context: '<img alt="" class="sv-noborder c2186" srcset="/images/18.2733cf65187efcf5c7e126b1/1695814140059/x160p/inga-otmalm-ebba-busch-puff.jpg 160w, /images/18.2733cf65187efcf5c7e126b1/1695814140059/inga-otmalm-ebba-busch-puff.jpg 309w" sizes="100vw" src="/ima...',
      selector: '#svid12_2733cf65187efcf5c7e11cf8>:nth-child(2)',
      code: 'WCAG2AA.Principle1.Guideline1_1.1_1_1.H67.2',
      type: 'warning',
      typeCode: 2,
      message: 'Img element is marked so that it is ignored by Assistive Technology.',
      runner: 'htmlcs',
      recurrence: 0
    },
    {
      context: '<span class="env-assistive-text"> Länk till annan webbplats.</span>',
      selector: '#svid12_46f4138717c599ee403a3457>:nth-child(2)>:nth-child(4)>:nth-child(1)>:nth-child(1)',
      code: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Abs',
      type: 'warning',
      typeCode: 2,
      message: 'This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least 4.5:1.',
      runner: 'htmlcs',
      recurrence: 1
    },
    {
      context: '<div id="svid10_46f4138717c599ee403a7ab0" class="sv-layout lp-overlay-page" aria-hidden="false"><div id="svid94_46f4138717c599ee...</div>',
      selector: '#svid10_46f4138717c599ee403a7ab0',
      code: 'WCAG2AA.Principle1.Guideline1_3.1_3_1.H48.2',
      type: 'warning',
      typeCode: 2,
      message: 'This content looks like it is simulating an ordered list using plain text. If so, marking up this content with an ol element would add proper structure information to the document.',
      runner: 'htmlcs',
      recurrence: 0
    },
    {
      context: '<img alt="" class="sv-noborder c2186" srcset="/images/18.6535432417e0f2071275d44e/1643275283617/x160p/lediga-jobb.jpg 160w, /images/18.6535432417e0f2071275d44e/1643275283617/lediga-jobb.jpg 309w" sizes="100vw" src="/images/18.6535432417e0f2071275d44e/...',
      selector: '#svid12_2733cf65187efcf5c7e11cf3>:nth-child(2)',
      code: 'WCAG2AA.Principle1.Guideline1_1.1_1_1.H67.2',
      type: 'warning',
      typeCode: 2,
      message: 'Img element is marked so that it is ignored by Assistive Technology.',
      runner: 'htmlcs',
      recurrence: 0
    },
    {
      context: '<h2 class="subheading sv-text-align-center" id="h-Vadvilldugora">Vad vill du göra?</h2>',
      selector: '#h-Vadvilldugora',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<button class="lp-toggle__trigger-button" source-id="lp0_12_46f4138717c599ee403a3457-toggler" aria-controls="lp0_12_46f4138717c599ee403a3457-content" aria-expanded="false">Starta företag eller ändra uppgi...</button>',
      selector: '#lp0_12_46f4138717c599ee403a3457-toggler>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<button class="lp-toggle__trigger-button" source-id="lp1_12_46f4138717c599ee403a3457-toggler" aria-controls="lp1_12_46f4138717c599ee403a3457-content" aria-expanded="false">Söka ärende eller se om årsredov...</button>',
      selector: '#lp1_12_46f4138717c599ee403a3457-toggler>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<button class="lp-toggle__trigger-button" source-id="lp2_12_46f4138717c599ee403a3457-toggler" aria-controls="lp2_12_46f4138717c599ee403a3457-content" aria-expanded="false">Anmäla eller söka verklig huvudm...</button>',
      selector: '#lp2_12_46f4138717c599ee403a3457-toggler>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<a href="https://sokarende.bolagsverket.se/soka/?betala" class="normal">Betala ett redan inskickat ärend...</a>',
      selector: '#svid12_46f4138717c599ee403a3457>:nth-child(2)>:nth-child(4)>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<a href="/foretag/aktiebolag/drivaaktiebolag/okaellerminskaaktiekapitalet.585.html" class="normal">Öka eller minska aktiekapitalet</a>',
      selector: '#svid12_46f4138717c599ee403a3457>:nth-child(2)>:nth-child(5)>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<a href="https://foretagsinfo.bolagsverket.se/" class="normal">Köpa registreringsbevis<span cla...</a>',
      selector: '#svid12_46f4138717c599ee403a3457>:nth-child(2)>:nth-child(6)>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<a href="/sjalvservice/etjanster/lamnainarsredovisningendigitalt.1663.html" class="normal">Lämna in årsredovisningen digita...</a>',
      selector: '#svid12_46f4138717c599ee403a3457>:nth-child(2)>:nth-child(7)>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    },
    {
      context: '<button class="lp-toggle__trigger-button" source-id="lp7_12_46f4138717c599ee403a3457-toggler" aria-controls="lp7_12_46f4138717c599ee403a3457-content" aria-expanded="false">Ladda ner ditt registreringsbevi...</button>',
      selector: '#lp7_12_46f4138717c599ee403a3457-toggler>:nth-child(1)',
      code: 'color-contrast',
      type: 'warning',
      typeCode: 2,
      message: 'Elements must have sufficient color contrast',
      runner: 'axe',
      runnerExtras: [Object],
      recurrence: 0
    }
  ],
  meta: { errorCount: 2, warningCount: 16, noticeCount: 0, accessScore: 80 },
  automateable: { missingAltIndexs: [] }
}

@thomasfischer-his
Copy link
Author

there is actually not a container for kayle

What I am using is 'docker.io/a11ywatch/a11ywatch', makes use of some kayle NPM packages, and the error message suggested that kayle is involved in the issue.

I am actually using podman (doubt that this is a problem, as I get reasonable output for other URLs), and the complete invocation is:

podman run --rm --interactive --add-host chrome:127.0.0.2 -p 3280:3280/tcp -p 50050:50050/tcp -p 50051:50051/tcp -p 50052:50052/tcp -p 50053:50053/tcp -p 50054:50054/tcp -p 9222:9222/tcp docker.io/a11ywatch/a11ywatch

To be more clear which package versions I am using, here is the output of

podman run --rm --interactive --tty --workdir /usr/src/app docker.io/a11ywatch/a11ywatch npm list | grep -iE 'axe.?core|html.?code.?sniffer|html.?cs|a11y|kayle'
+-- @a11ywatch/client@0.0.5 extraneous
+-- @a11ywatch/core@0.8.14 extraneous
+-- @a11ywatch/crawler@0.8.11 extraneous
+-- @a11ywatch/mav@0.7.27 extraneous
+-- @a11ywatch/pagemind@0.9.54 extraneous
+-- @a11ywatch/protos@0.4.7 extraneous
+-- @a11ywatch/website-source-builder@0.1.14 extraneous
+-- axe-core@4.4.1 extraneous
+-- fast_axecore@4.6.31 extraneous
+-- fast_htmlcs@0.0.66 extraneous
+-- kayle_innate@0.0.22 extraneous
+-- kayle@0.7.12 extraneous

The issue looks like a custom runner maybe was added through the node env?

I have neither touched the code, added or removed packages, nor made any configuration changes.

Example of the data below with htmlcs, axe for runners.

My curl invocation does not specify any runner, but even if I add , "runners": ["custom"] to the JSON payload, it does not make any difference.

@j-mendez
Copy link
Contributor

j-mendez commented Oct 6, 2023

@thomasfischer-his is this happening for every URL?

@thomasfischer-his
Copy link
Author

@thomasfischer-his is this happening for every URL?

No, right now bolagsverket.se is the only page where I can reproduce this problem. I just tested a few other domains, but for those everything is fine, i.e. a list of accessibility issues get reported and no error messages in the container's console.

@j-mendez
Copy link
Contributor

j-mendez commented Oct 9, 2023

@thomasfischer-his
A11yWatch dashboard example displaying captcha results in audit for https://bolagsverket.se/ it looks like the reason the audits are failing is due to a captcha. Here is the exact issue below:

2023-10-09 08:52:48 navigating to "https://bolagsverket.se/", waiting until "load"
2023-10-09 08:52:48 ============================================================
2023-10-09 08:52:48     at gatherPages (/usr/src/app/server/src/core/controllers/gather-pages.ts:119:16)
2023-10-09 08:52:48     at Object.gather (/usr/src/app/server/src/proto/grpc-server.ts:28:20) {
2023-10-09 08:52:48   name: 'Error'
2023-10-09 08:52:48 }

The reason the system runs fine when simply using kayle for this page the Agent is not treated as a bot. A11ywatch Lite uses a11ywatchbot as a User-Agent and it looks like it is triggering there defensive system like captchas etc. Usually admins whitelist the bot to prevent issues like this.

There might be room to disable A11ywatchbot from being sent as a UA but, we really are not trying to adjust litemode unless there is a bug since the features are frozen, it is best to use a11ywatch.com hosted it is cheaper than running on your own machine and has an influx of changes that increase accuracy on audits and more.

@j-mendez
Copy link
Contributor

j-mendez commented Oct 9, 2023

Going to transfer the issue to the a11ywatch repo since it affects multiple services. LiteMode has layered crawling so it would take a bit of changes to allow adjusting the UA or setting a default one.

@j-mendez j-mendez transferred this issue from a11ywatch/kayle Oct 9, 2023
@j-mendez
Copy link
Contributor

@thomasfischer-his this is now fixed via a11ywatch_cli 0.10.13 on the docker containers by using a11ywatch --set-ua some-agent replace some-agent with your user agent and you will be unblocked from the Bot detection for that website.

If using the the sidecar use the env variable A11YWATCH_UA to adjust the agent.

@thomasfischer-his thomasfischer-his mentioned this issue Nov 9, 2023
Closed
@thomasfischer-his thomasfischer-his mentioned this issue Nov 17, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@j-mendez @thomasfischer-his