Forum Discussion

Susan_123's avatar
Susan_123
Occasional Contributor
5 months ago

how to do Integration of Axe-core with testcomplete for accessibility testing (javascript)

Hi all,

I have tried accessibility testing with axe-core using the following steps:

1) inject the axe.min.js file in to web application.

2) execute axe.run with its parameters and fetch results.

But i am facing "type mismatch" error while passing axe.run() along with parameters.Could anyone please help me with this.Thanks!!!

 

Please find attached the exact code i am trying to use.

8 Replies

  • Marsha_R's avatar
    Marsha_R
    Champion Level 3

    Which line of code is producing the error? If it's the var axeScript line, you haven't actually run anything. That's an assignment statement.

     

     

     

    • Susan_123's avatar
      Susan_123
      Occasional Contributor

      i am facing error on the same line (line no 21), has removed the assignment statement still getting type mismatch error. Please find attached the latest code 

  • rraghvani's avatar
    rraghvani
    Champion Level 3

    Here's an example,

     

    function Assessibility()
    {
        // Launch browser
        Browsers.Item(btChrome).Navigate("https://www.google.com/");
        var page = Sys.Browser("chrome").Page("*");
        page.Wait();
        
        // Inject script
        var script = page.contentDocument.createElement("script");
        script.src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.2/axe.min.js";
        script.type = "text/javascript";
        page.contentDocument.head.appendChild(script);
    
        // Function call    
        page.contentDocument.Script.eval("axe.run({resultTypes: ['violations']}, function (err, results) {if (err) throw err; console.log(results);});");
    }

     

    The function is called, and the output is shown in DevTools,

    If I replace console.log(results) with return results, then the object is not returned. I'm not sure how to retrieve the object, and not sure if it's a limitation of Chrome.

     

    Hopefully, this should be enough to get you going, and if you do find out how to retrieve the object, then please provide the solution.

    • Susan_123's avatar
      Susan_123
      Occasional Contributor

      Thanks rraghvani for the example , I was able to achieve the same by injecting below code

      in axeScript.textContent as well and see results in console. But even i was not able to return the object so that it can be used later to generate some html results or print the results in testcomplete log.

       

      Hence tried the previously shared approach where i am getting type mismatch error

       

      Will try to retrieve the object, if i get some solution will share the same . Thanks!

       

       

      • Mukeshmani's avatar
        Mukeshmani
        Regular Visitor
        Hi Susan , have you got any luck on the report generation from object
  • rraghvani's avatar
    rraghvani
    Champion Level 3

    Also note, I'm not sure what JavaScript version axe is written in, but it might not be supported by TestComplete.

     

    Certain parameters will need to be converted to JSON,

     

    var json = JSON.stringify({
      resultTypes: ['violations']
    });
    

     

    I've never come across axe before, so I don't know how to fully use it.

    • Marsha_R's avatar
      Marsha_R
      Champion Level 3
      Axe is a pretty useful tool for checking accessibility but we run it standalone so I don't know the parameters.