Skip to content

Commit

Permalink
Improves documentation for accessibility and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@huaxing-yuan
huaxing-yuan committed May 2, 2024
1 parent eaf393f commit f0528cf
Show file tree
Hide file tree
Showing 20 changed files with 379 additions and 94 deletions.
6 changes: 3 additions & 3 deletions docs/api_net/AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ <h3 id="properties">Properties
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/new/develop/apiSpec/new?filename=AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_Options.md&amp;value=---%0Auid%3A%20AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.Options%0Asummary%3A%20'*You%20can%20override%20summary%20for%20the%20API%20here%20using%20*MARKDOWN*%20syntax'%0A---%0A%0A*Please%20type%20below%20more%20information%20about%20this%20API%3A*%0A%0A">Improve this Doc</a>
</span>
<span class="small pull-right mobile-hide">
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.AxeExtended.HtmlReport/OverallReportBuilder.cs/#L203">View Source</a>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.AxeExtended.HtmlReport/OverallReportBuilder.cs/#L206">View Source</a>
</span>
<a id="AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_Options_" data-uid="AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.Options*"></a>
<h4 id="AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_Options" data-uid="AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.Options">Options</h4>
Expand Down Expand Up @@ -176,7 +176,7 @@ <h5 class="propertyValue">Property Value</h5>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/new/develop/apiSpec/new?filename=AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_PageBuilders.md&amp;value=---%0Auid%3A%20AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.PageBuilders%0Asummary%3A%20'*You%20can%20override%20summary%20for%20the%20API%20here%20using%20*MARKDOWN*%20syntax'%0A---%0A%0A*Please%20type%20below%20more%20information%20about%20this%20API%3A*%0A%0A">Improve this Doc</a>
</span>
<span class="small pull-right mobile-hide">
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.AxeExtended.HtmlReport/OverallReportBuilder.cs/#L211">View Source</a>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.AxeExtended.HtmlReport/OverallReportBuilder.cs/#L214">View Source</a>
</span>
<a id="AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_PageBuilders_" data-uid="AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.PageBuilders*"></a>
<h4 id="AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_PageBuilders" data-uid="AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.PageBuilders">PageBuilders</h4>
Expand Down Expand Up @@ -207,7 +207,7 @@ <h5 class="propertyValue">Property Value</h5>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/new/develop/apiSpec/new?filename=AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_Result.md&amp;value=---%0Auid%3A%20AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.Result%0Asummary%3A%20'*You%20can%20override%20summary%20for%20the%20API%20here%20using%20*MARKDOWN*%20syntax'%0A---%0A%0A*Please%20type%20below%20more%20information%20about%20this%20API%3A*%0A%0A">Improve this Doc</a>
</span>
<span class="small pull-right mobile-hide">
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.AxeExtended.HtmlReport/OverallReportBuilder.cs/#L216">View Source</a>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.AxeExtended.HtmlReport/OverallReportBuilder.cs/#L219">View Source</a>
</span>
<a id="AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_Result_" data-uid="AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.Result*"></a>
<h4 id="AxaFrance_AxeExtended_HtmlReport_OverallReportBuilder_Result" data-uid="AxaFrance.AxeExtended.HtmlReport.OverallReportBuilder.Result">Result</h4>
Expand Down
44 changes: 43 additions & 1 deletion docs/api_net/AxaFrance.WebEngine.Report.TestCaseReport.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ <h5 class="propertyValue">Property Value</h5>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/new/develop/apiSpec/new?filename=AxaFrance_WebEngine_Report_TestCaseReport_AttachedData.md&amp;value=---%0Auid%3A%20AxaFrance.WebEngine.Report.TestCaseReport.AttachedData%0Asummary%3A%20'*You%20can%20override%20summary%20for%20the%20API%20here%20using%20*MARKDOWN*%20syntax'%0A---%0A%0A*Please%20type%20below%20more%20information%20about%20this%20API%3A*%0A%0A">Improve this Doc</a>
</span>
<span class="small pull-right mobile-hide">
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.WebEngine/Report/TestCaseReport.cs/#L116">View Source</a>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.WebEngine/Report/TestCaseReport.cs/#L121">View Source</a>
</span>
<a id="AxaFrance_WebEngine_Report_TestCaseReport_AttachedData_" data-uid="AxaFrance.WebEngine.Report.TestCaseReport.AttachedData*"></a>
<h4 id="AxaFrance_WebEngine_Report_TestCaseReport_AttachedData" data-uid="AxaFrance.WebEngine.Report.TestCaseReport.AttachedData">AttachedData</h4>
Expand Down Expand Up @@ -492,6 +492,48 @@ <h5 class="propertyValue">Property Value</h5>
</tr>
</tbody>
</table>
<h3 id="methods">Methods
</h3>
<span class="small pull-right mobile-hide">
<span class="divider">|</span>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/new/develop/apiSpec/new?filename=AxaFrance_WebEngine_Report_TestCaseReport_AttachFile_System_String_System_String_.md&amp;value=---%0Auid%3A%20AxaFrance.WebEngine.Report.TestCaseReport.AttachFile(System.String%2CSystem.String)%0Asummary%3A%20'*You%20can%20override%20summary%20for%20the%20API%20here%20using%20*MARKDOWN*%20syntax'%0A---%0A%0A*Please%20type%20below%20more%20information%20about%20this%20API%3A*%0A%0A">Improve this Doc</a>
</span>
<span class="small pull-right mobile-hide">
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.WebEngine/Report/TestCaseReport.cs/#L112">View Source</a>
</span>
<a id="AxaFrance_WebEngine_Report_TestCaseReport_AttachFile_" data-uid="AxaFrance.WebEngine.Report.TestCaseReport.AttachFile*"></a>
<h4 id="AxaFrance_WebEngine_Report_TestCaseReport_AttachFile_System_String_System_String_" data-uid="AxaFrance.WebEngine.Report.TestCaseReport.AttachFile(System.String,System.String)">AttachFile(String, String)</h4>
<div class="markdown level1 summary"><p>Attach a external file to the test report.</p>
</div>
<div class="markdown level1 conceptual"></div>
<h5 class="decalaration">Declaration</h5>
<div class="codewrapper">
<pre><code class="lang-csharp hljs">public void AttachFile(string fileName, string fileType)</code></pre>
</div>
<h5 class="parameters">Parameters</h5>
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="xref">System.String</span></td>
<td><span class="parametername">fileName</span></td>
<td><p>the fullpath of the file.</p>
</td>
</tr>
<tr>
<td><span class="xref">System.String</span></td>
<td><span class="parametername">fileType</span></td>
<td><p>the type of the file, possible values: AccessibilityReport</p>
</td>
</tr>
</tbody>
</table>
</article>
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/api_net/AxaFrance.WebEngine.Report.TestSuiteReport.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,7 @@ <h3 id="methods">Methods
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/new/develop/apiSpec/new?filename=AxaFrance_WebEngine_Report_TestSuiteReport_GenereteCSV_System_String_System_String_System_Boolean_.md&amp;value=---%0Auid%3A%20AxaFrance.WebEngine.Report.TestSuiteReport.GenereteCSV(System.String%2CSystem.String%2CSystem.Boolean)%0Asummary%3A%20'*You%20can%20override%20summary%20for%20the%20API%20here%20using%20*MARKDOWN*%20syntax'%0A---%0A%0A*Please%20type%20below%20more%20information%20about%20this%20API%3A*%0A%0A">Improve this Doc</a>
</span>
<span class="small pull-right mobile-hide">
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.WebEngine/Report/TestSuiteReport.cs/#L138">View Source</a>
<a href="https://github.com/AxaGuilDEv/webengine-dotnet/blob/develop/src/AxaFrance.WebEngine/Report/TestSuiteReport.cs/#L142">View Source</a>
</span>
<a id="AxaFrance_WebEngine_Report_TestSuiteReport_GenereteCSV_" data-uid="AxaFrance.WebEngine.Report.TestSuiteReport.GenereteCSV*"></a>
<h4 id="AxaFrance_WebEngine_Report_TestSuiteReport_GenereteCSV_System_String_System_String_System_Boolean_" data-uid="AxaFrance.WebEngine.Report.TestSuiteReport.GenereteCSV(System.String,System.String,System.Boolean)">GenereteCSV(String, String, Boolean)</h4>
Expand Down
73 changes: 60 additions & 13 deletions docs/articles/accessibility.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Accessibility testing with WebEngine | AXA WebEngine Test Framework </title>
<title>Accessibility testing with WebEngine (or not) | AXA WebEngine Test Framework </title>
<meta name="viewport" content="width=device-width">
<meta name="title" content="Accessibility testing with WebEngine | AXA WebEngine Test Framework ">
<meta name="title" content="Accessibility testing with WebEngine (or not) | AXA WebEngine Test Framework ">
<meta name="generator" content="docfx 2.59.4.0">

<link rel="shortcut icon" href="../images/logo_small.svg">
Expand Down Expand Up @@ -67,17 +67,31 @@
<div class="article row grid-right">
<div class="col-md-10">
<article class="content wrap" id="_content" data-uid="">
<h1 id="accessibility-testing-with-webengine">Accessibility testing with WebEngine</h1>
<h1 id="accessibility-testing-with-webengine-or-not">Accessibility testing with WebEngine (or not)</h1>

<p>In the latested WebEngine Framework, we have integrated accessibility testing features to help you ensure your applications are accessible to all users. The Framework uses the Axe-core library to perform accessibility tests on your applications and provide you with a overall and detailed report of the issues found.</p>
<p>You can run accessibility tests on two different levels:</p>
<p>From the version 1.2 of WebEngine Framework, we have integrated accessibility testing features to help you ensure your applications are accessible to all users. The Framework uses the Axe-core library to perform accessibility tests on your applications and provide you with an overall and detailed report of the issues found.</p>
<p>You can run accessibility tests on two distinct levels:</p>
<ul>
<li><strong>Page Level</strong>: This level will run the accessibility tests on the current page.</li>
<li><strong>User Journey Level</strong>: This level will run the accessibility test on the entire user journey and shows you a overall test report.</li>
<li><strong>Single Page Level</strong>: This level will run the accessibility tests on the current page.</li>
<li><strong>User Journey</strong>: This level will run the accessibility test on the entire user journey and shows you an overall test report.</li>
</ul>
<h2 id="features">Features</h2>
<p>Compared to other accessibility testing tools based on axe-core, we provide you with the following features:</p>
<ul>
<li><strong>Adaptability</strong>: With just a single line of code. You can run accessibility tests on your existing selenium project. </li>
<li><strong>Extensibility</strong>: You can test your application agasint additional rules you&#39;ve customized.</li>
<li><strong>RGAA</strong>: We have made the work to tag axe html rules with RGAA regularation. So after the test, you have an idea of which RGAA rules are respected. *</li>
</ul>
<div class="NOTE"><h5>Note</h5><p>* The coverage of RGAA rule means that a rule is <em>covered</em> by test. It does not mean that the rule is <em>validated</em> by the test. To validate a rule, all test methodologies specified in the RGAA documentation must be checked and passed.</p>
</div>
<h2 id="prerequisites">Prerequisites</h2>
<p>Having WebEngine version 1.2 and above, working on Windows and MacOS.</p>
<h2 id="run-accessibility-tests">Run accessibility tests</h2>
<p>Working on Windows or MacOS, having the following SDK packages:</p>
<ul>
<li><strong>AxaFrance.AxeExtended.Selenium</strong> : If you have an existing selenium based test solution without using WebEngine Framework. You can still run accessibility tests with this package.</li>
<li><strong>AxaFrance.WebEngine.Web</strong> : With V1.2+, the package has integrated accessibility testing and AxeExtended pacakge.</li>
</ul>
<h2 id="run-accessibility-tests-on-existing-selenium-project">Run accessibility tests on existing selenium project</h2>
<p>Following are examples on how to run accessibility tests on a single page using <code>PageReportBuilder</code> or on multiple pages of a user journey by using <code>OverallReportBuilder</code>. It generates.</p>
<h3 id="run-accessibility-test-on-a-single-page">Run accessibility test on a single page</h3>
<p>To run accessibility tests on a single page, you can use the following code snippet:</p>
<pre><code class="lang-csharp">// Create a new instance of webdriver using Selenium
Expand Down Expand Up @@ -112,8 +126,8 @@ <h3 id="scan-options">Scan options</h3>
<li><strong>HighlightColor</strong>: When using advanced screenshot, the identified element will be highlighred with Green color.</li>
<li><strong>HighlightThickness</strong>: The thickness of the highlight, 5 pixels.</li>
<li><strong>ScoringMode</strong>: Weighted or NonWeighted.</li>
<li><strong>UseAdvancedScreenshot</strong>: When active, the screenshot will be fullscreen with identified elements highlighted. Otherwise, the screenshot will be taken only on the element itself. it&#39;s easier to locate elements with Advanced screenshot, but it will be slower and uses more disk space.</li>
<li><strong>Tags</strong>: the tags identifies the rules to use. In above example, we are scanning agating WCAG AA rules only.</li>
<li><strong>UseAdvancedScreenshot</strong>: When active, the screenshot will be full screen with identified elements highlighted. Otherwise, the screenshot will be taken only on the element itself. it is easier to locate elements with Advanced screenshot, but it will be slower and uses more disk space.</li>
<li><strong>Tags</strong>: the tags identify the rules to use. In above example, we are scanning agating WCAG AA rules only.</li>
</ul>
<p>To know more about the options, please refer to <a class="xref" href="../api_net/AxaFrance.AxeExtended.HtmlReport.PageReportOptions.html">PageReportOptions</a>.</p>
<h3 id="run-accessibility-test-on-a-user-journey">Run accessibility test on a user journey</h3>
Expand All @@ -140,8 +154,41 @@ <h3 id="run-accessibility-test-on-a-user-journey">Run accessibility test on a us
builder.WithSelenium(driver, &quot;Assistance&quot;).Build();

string report = builder.Build().Export();
</code></pre><p>Observing the above code snippet, you can see that we are using <code>OverallReportBuilder</code> to generate the report using a default options which will be applied to all pages. Then, we are navigating to different pages and calling the <code>WithSelenium</code> method to pass the driver, on each individual page.</p>
<p>Finally, we are calling the <code>Build</code> method to analyze and generate report and <code>Export</code> method to get the path to the generated report. As provided in the options, the report will be generated in a zip format.</p>
</code></pre><p>Observing the above code snippet, you can see that we are using <code>OverallReportBuilder</code> to generate the report using a default option which will be applied to all pages. Then, we are navigating to different pages and calling the <code>WithSelenium</code> method to pass the driver, on each individual page.</p>
<p>Finally, we are calling the <code>Build</code> method to analyze and generate report and <code>Export</code> method to get the path to the generated report. As provided in the options, the report will be generated in zip format.</p>
<h2 id="run-accessibility-tests-on-projects-using-webengine">Run accessibility tests on projects using WebEngine</h2>
<h3 id="keyword-driven-test-case">Keyword-Driven test case</h3>
<p>When running accessibility test on an end-to-end test using keyword-driven method, there are two steps to follow.</p>
<h4 id="activate-accessibility-testing">Activate accessibility testing</h4>
<p>Accessibility testing should be activated at Test Case level, so the scan engines are initialized and accessibility test result on each scan will be integrated in test report.
To activate accessibility testing on Test Case level, Set the property <a class="xref" href="../api_net/AxaFrance.WebEngine.Web.TestCaseWeb.html#AxaFrance_WebEngine_Web_TestCaseWeb_IsAccessibilityTestEnabled">IsAccessibilityTestEnabled</a> of test case to <code>true</code>. If you want to activate it dynamically via test data, you can provide a test case named <code>Accessibility</code> and set it to <code>True</code></p>
<h4 id="scanning-a-page">Scanning a page</h4>
<p>In a shared action, at the convenient moment call the method &lt;xref:AxaFrance.WebEngine.Web.SharedActionWeb.RunAccessibilityTest(string)&gt;
This function runs an accessibility scan at current location, then integrates test result to test report. The scan can be performed multiple times on different location within a user journey. With this method, you don’t need to interact directly with classes such as <code>OverallReportBuilder</code> or <code>PageReportBuilder</code></p>
<h3 id="gherkin-based-test-case">Gherkin based test case</h3>
<p>If you are using Gherkin based test case. You’ll need to follow the same steps:
• Initilaize <code>OverallReportBuilder</code> before the execution of the scenario
• Calls <code>builder.WithSelenium(driver, &quot;Page Name&quot;).Build()</code> at the point you want to scan the page
• Export the test result, or attach the test result to test report
Assuming <code>reportBuilder</code> is type of OverallReportBuilder and the export format is <strong>ZIP</strong>, use the following instructions to attach accessibility test result to your test report</p>
<pre><code class="lang-csharp">var a11yReport = reportBuilder.Build().Export();
testCaseReport.AttachFile(a11yReport, &quot;AccessibilityReport&quot;);
</code></pre><p>The first statement exports test result to a zip file, then the second statement attachs it as <code>AccessibilityReport</code>.</p>
<h3 id="view-accessibility-test-result">View accessibility test result</h3>
<p>In Report Viewer, if a test case has attached Accessibility test result, <code>Accessibility</code> tab will be available. View overall test result, or click on a specific page to see detailed report.
It is also possible to view the report in a browser by clicking on the <code>View in Browser</code> button.</p>
<p><img src="../images/a11yreport.png" alt="Accessibility Report"></p>
<h2 id="examples">Examples</h2>
<p>In the data driven sample, you can find how accessibility tests are integrated in the test solution.
<a href="https://github.com/AxaFrance/webengine-dotnet/tree/main/src/Samples.DataDriven">https://github.com/AxaFrance/webengine-dotnet/tree/main/src/Samples.DataDriven</a></p>
<ul>
<li>Test data: <a href="../files/Data-HomeInsurance.xlsx">Data-HomeInsurance.xlsx</a> In the test data, we have added a row named <code>Accessibility</code> with value <code>True</code> to activate accessibility testing on the test case. Accessibility test is activated on the first test case.</li>
<li>Scan, We have called <code>RunAccessibilityTest</code> to perform accessibility test on 3 pages: </li>
<li>On Login action, perform test before submitting the form.</li>
<li>On Home details action, perform test before clicking on the next button.</li>
<li>On Choose offer and options page.</li>
</ul>
<p>The above steps will generate accessibility test results for 3 pages in the test report, as showing in the screenshot above.</p>
</article>
</div>

Expand Down
Binary file modified docs/files/Data-HomeInsurance.xlsx
View file
Binary file not shown.
Binary file added docs/images/a11yreport.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit f0528cf

Please sign in to comment.