testilo 3.9.15 → 3.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/procs/compare/cpA11yMessage/index.html +4 -3
- package/procs/compare/cpA11yMessage/index.js +1 -1
- package/procs/compare/cpProductPrice/index.html +40 -0
- package/procs/compare/cpProductPrice/index.js +71 -0
- package/procs/digest/dpProductPrice/index.html +80 -0
- package/procs/digest/dpProductPrice/index.js +112 -0
- package/procs/score/spA11yMessage.js +3 -3
- package/procs/score/spProductPrice.js +160 -0
package/package.json
CHANGED
|
@@ -18,9 +18,10 @@
|
|
|
18
18
|
<h1>Transactional accessibility comparison</h1>
|
|
19
19
|
</header>
|
|
20
20
|
<h2>Introduction</h2>
|
|
21
|
-
<p>This report compares __pageCount__ web pages, rating each page on <dfn>transactional accessibility</dfn>. The score given to each page estimates the <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> of one particular transaction
|
|
22
|
-
<p>You can find a more detailed explanation of transactional accessibility and how the accessibility of this particular transaction is scored in each of the
|
|
23
|
-
<p>This report was produced by the <code>cpA11yMessage</code> procedure of <a href="https://www.npmjs.com/package/testilo">Testilo</a
|
|
21
|
+
<p>This report compares __pageCount__ web pages, rating each page on <dfn>transactional accessibility</dfn>. The score given to each page estimates the <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> of one particular transaction. In it, the user discovers how to report an accessibility issue with the page to those who are responsible for the page.</p>
|
|
22
|
+
<p>You can find a more detailed explanation of transactional accessibility and how the accessibility of this particular transaction is scored in each of the digests that this report is derived from. The scores in the table below are links to those digests.</p>
|
|
23
|
+
<p>This comparative report was produced by the <code>cpA11yMessage</code> procedure of <a href="https://www.npmjs.com/package/testilo">Testilo</a>.</p>
|
|
24
|
+
<p>The scores in the table below could range from 0 (complete failure) up to 23 (complete success).</p>
|
|
24
25
|
<h2>Comparison</h2>
|
|
25
26
|
<table class="allBorder">
|
|
26
27
|
<caption>Accessibility scores of accessibility-reporting transactions</caption>
|
|
@@ -46,7 +46,7 @@ const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, i
|
|
|
46
46
|
const getTableBody = async bodyData => {
|
|
47
47
|
const maxScore = getMaxScore(bodyData);
|
|
48
48
|
const rows = bodyData
|
|
49
|
-
.sort((a, b) =>
|
|
49
|
+
.sort((a, b) => b.score - a.score)
|
|
50
50
|
.map(item => {
|
|
51
51
|
const {id, org, url, score} = item;
|
|
52
52
|
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang="en-US">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="author" content="Testilo">
|
|
7
|
+
<meta name="creator" content="Testilo">
|
|
8
|
+
<meta name="publisher" name="Testilo">
|
|
9
|
+
<meta name="description" content="comparison of accessibility scores">
|
|
10
|
+
<meta name="keywords" content="accessibility a11y web testing">
|
|
11
|
+
<title>Accessibility score comparison</title>
|
|
12
|
+
<link rel="icon" href="favicon.png">
|
|
13
|
+
<link rel="stylesheet" href="style.css">
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<main>
|
|
17
|
+
<header>
|
|
18
|
+
<h1>Transactional accessibility comparison</h1>
|
|
19
|
+
</header>
|
|
20
|
+
<h2>Introduction</h2>
|
|
21
|
+
<p>This report compares __pageCount__ web pages, rating each page on <dfn>transactional accessibility</dfn>. The score given to each page estimates the <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> of one particular transaction. In it, the user finds the price at which a product is offered for sale on the website to which the page belongs.</p>
|
|
22
|
+
<p>You can find a more detailed explanation of transactional accessibility and how the accessibility of this particular transaction is scored in each of the digests that this report is derived from. The scores in the table below are links to those digests.</p>
|
|
23
|
+
<p>This comparative report was produced by the <code>cpProductPrice</code> procedure of <a href="https://www.npmjs.com/package/testilo">Testilo</a>.</p>
|
|
24
|
+
<p>The scores in the table below could range from 0 (complete failure) up to 26 (complete success).</p>
|
|
25
|
+
<h2>Comparison</h2>
|
|
26
|
+
<table class="allBorder">
|
|
27
|
+
<caption>Accessibility scores of product-price-inquiry transactions</caption>
|
|
28
|
+
<thead>
|
|
29
|
+
<tr><th scope="col">Page</th><th scope="col" colspan="2">Score (higher is better)</tr>
|
|
30
|
+
</thead>
|
|
31
|
+
<tbody class="linkSmaller secondCellRight">
|
|
32
|
+
__tableBody__
|
|
33
|
+
</tbody>
|
|
34
|
+
</table>
|
|
35
|
+
<footer>
|
|
36
|
+
<p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
|
|
37
|
+
</footer>
|
|
38
|
+
</main>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/*
|
|
2
|
+
cpProductPrice.js
|
|
3
|
+
Returns a query for an HTML page including a bar-graph table.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// ########## IMPORTS
|
|
7
|
+
|
|
8
|
+
// Module to keep secrets local.
|
|
9
|
+
require('dotenv').config();
|
|
10
|
+
// Module to access files.
|
|
11
|
+
const fs = require('fs/promises');
|
|
12
|
+
|
|
13
|
+
// ########## CONSTANTS
|
|
14
|
+
|
|
15
|
+
const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
|
|
16
|
+
const query = {};
|
|
17
|
+
|
|
18
|
+
// ########## FUNCTIONS
|
|
19
|
+
|
|
20
|
+
// Returns data on the hosts in the report directory.
|
|
21
|
+
const getData = async () => {
|
|
22
|
+
const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
|
|
23
|
+
const reportFileNamesAll = await fs.readdir(reportDirAbs);
|
|
24
|
+
const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
|
|
25
|
+
const pageCount = reportFileNamesSource.length;
|
|
26
|
+
const bodyData = [];
|
|
27
|
+
for (const fileName of reportFileNamesSource) {
|
|
28
|
+
const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
|
|
29
|
+
const file = JSON.parse(fileJSON);
|
|
30
|
+
const {id, host, score} = file;
|
|
31
|
+
bodyData.push({
|
|
32
|
+
id,
|
|
33
|
+
org: host.what,
|
|
34
|
+
url: host.which,
|
|
35
|
+
score: score.total
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
return {
|
|
39
|
+
pageCount,
|
|
40
|
+
bodyData
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
// Returns the maximum score.
|
|
44
|
+
const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
|
|
45
|
+
// Converts report data to a table body.
|
|
46
|
+
const getTableBody = async bodyData => {
|
|
47
|
+
const maxScore = getMaxScore(bodyData);
|
|
48
|
+
const rows = bodyData
|
|
49
|
+
.sort((a, b) => b.score - a.score)
|
|
50
|
+
.map(item => {
|
|
51
|
+
const {id, org, url, score} = item;
|
|
52
|
+
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
53
|
+
const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
|
|
54
|
+
const barWidth = 100 * score / maxScore;
|
|
55
|
+
const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
|
|
56
|
+
const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
|
|
57
|
+
const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
|
|
58
|
+
return row;
|
|
59
|
+
});
|
|
60
|
+
return rows.join('\n ');
|
|
61
|
+
};
|
|
62
|
+
// Returns a query for a comparative table.
|
|
63
|
+
exports.getQuery = async () => {
|
|
64
|
+
const data = await getData();
|
|
65
|
+
query.pageCount = data.pageCount;
|
|
66
|
+
query.tableBody = await getTableBody(data.bodyData);
|
|
67
|
+
const date = new Date();
|
|
68
|
+
query.dateISO = date.toISOString().slice(0, 10);
|
|
69
|
+
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
70
|
+
return query;
|
|
71
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang="en-US">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="author" content="Testilo">
|
|
7
|
+
<meta name="creator" content="Testilo">
|
|
8
|
+
<meta name="publisher" name="Testilo">
|
|
9
|
+
<meta name="description" content="report of accessibility testing of a web page">
|
|
10
|
+
<meta name="keywords" content="accessibility a11y web testing">
|
|
11
|
+
<title>Accessibility test digest</title>
|
|
12
|
+
<link rel="icon" href="favicon.png">
|
|
13
|
+
<link rel="stylesheet" href="style.css">
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<main>
|
|
17
|
+
<header>
|
|
18
|
+
<h1>Accessibility test digest</h1>
|
|
19
|
+
<h2>Synopsis</h2>
|
|
20
|
+
<div id="synopsis">
|
|
21
|
+
<p><strong>Page</strong>: __org__</p>
|
|
22
|
+
<p><strong>URL</strong>: __url__</p>
|
|
23
|
+
<p><strong>Score</strong>: __totalScore__</p>
|
|
24
|
+
<p><strong>Tested by</strong>: Testaro, procedure <code>tpProductPrice</code></p>
|
|
25
|
+
<p><strong>Scored by</strong>: Testilo, procedure <code>spProductPrice</code></p>
|
|
26
|
+
<p><strong>Digested by</strong>: Testilo, procedure <code>dpProductPrice</code></p>
|
|
27
|
+
</div>
|
|
28
|
+
</header>
|
|
29
|
+
<h2>Introduction</h2>
|
|
30
|
+
<p>This is a report on transactional <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a>. Suppose a person is visiting a website and wants to engage in some transaction with it. Is the transaction easy, predictable, and safe? If so, the website is <dfn>transactionally accessible</dfn>. To achieve transactional accessibility, websites can design transactions that conform to the most common and standard conventions. Then users will correctly guess what to do at each step. Users with some disabilities will especially benefit from being able to use existing knowledge and tools, without the need to discover how to do things on a website.</p>
|
|
31
|
+
<p>This transaction involves finding the price of a product. The transaction begins when a person opens the home page of a vendor of the product. The user wants to find the price at which the vendor offers the product. The test assumes that there is a standard transaction structure in such a situation:</p>
|
|
32
|
+
<ol>
|
|
33
|
+
<li>The user finds a search input on the page.</li>
|
|
34
|
+
<li>The user enters a quoted query identifying the product into that input.</li>
|
|
35
|
+
<li>The user presses the Enter key to submit the query.</li>
|
|
36
|
+
<li>That submission takes the user to a product page.</li>
|
|
37
|
+
<li>On the product page, there is a description of the product offering, containing both the full name of the product and the price at which the vendor offers the product.</li>
|
|
38
|
+
<li>The elements containing the product name and price are coded with the <code>itemprop</code> attributes (<code>itemprop="name"</code> and <code>itemprop="price"</code>, respectively) specified by the <a href="https://schema.org/price">Schema.org standard for the price property</a>.</li>
|
|
39
|
+
</ol>
|
|
40
|
+
<p>As of this version of <code>spProductPrice</code>, the <code>itemprop="priceCurrency"</code> attribute is not considered; Schema.org recommends using <code>USD</code> rather than <code>$</code> as the currency identifier for the United States dollar in association with that <code>itemprop</code> value.</p>
|
|
41
|
+
<p>Thus, instead of the user needing to figure out how this particular website discloses product prices, the user is assumed already to know how websites normally do that. Instead of exploring the site to find its method, the person uses the standard method.</p>
|
|
42
|
+
<h2>Procedures</h2>
|
|
43
|
+
<p>The <a href="https://www.npmjs.com/package/testaro">Testaro</a> application used its <code>tpProductPrice</code> testing procedure to evaluate the accessibility of this transaction on the __org__ web page at <a href="__url__">__url__</a> on __dateSlash__. Testaro produced a report.</p>
|
|
44
|
+
<p>The <a href="https://www.npmjs.com/package/testilo">Testilo</a> application processed the report and used the <code>spProductPrice</code> scoring procedure to compute a score for the transaction. The total score is __totalScore__ (where 0 is the worst and 24 is the best possible score). The scored report is appended below.</p>
|
|
45
|
+
<p>Finally, Testilo used procedure <code>dpProductPrice</code> to produce this digest, briefly explaining how <code>spA11yMessage</code> computed the scores.</p>
|
|
46
|
+
<h2>Score summary</h2>
|
|
47
|
+
<table class="allBorder secondCellRight">
|
|
48
|
+
<caption>Score components</caption>
|
|
49
|
+
<tbody class="headersLeft">
|
|
50
|
+
__scoreRows__
|
|
51
|
+
</tbody>
|
|
52
|
+
</table>
|
|
53
|
+
<h2>Explanation</h2>
|
|
54
|
+
<p>The components of the total score are:</p>
|
|
55
|
+
<ul>
|
|
56
|
+
<li><code>pageLoad</code>: 2 points if it was possible to visit the page</li>
|
|
57
|
+
<li><code>pageFast</code>: 2 points if the page loaded within 4 seconds, or 1 point if it loaded within 6 seconds</li>
|
|
58
|
+
<li><code>searchInput</code>: 1 point if the page contained a search input</li>
|
|
59
|
+
<li><code>searchType</code>: 2 points if the search input consisted of an <code>input</code> element with a <code>type="search"</code> attribute rather than an <code>aria-label</code> or <code>placeholder</code> attribute with a value containing <code>search</code>.</li>
|
|
60
|
+
<li><code>searchWork</code>: 2 points if it was possible to submit the search query by pressing the Enter key</li>
|
|
61
|
+
<li><code>searchFast</code>: 3 points if the product page loaded within 3 seconds, 2 points if within 5 seconds, or 1 point if within 7 seconds</li>
|
|
62
|
+
<li><code>nameInPage</code>: 2 points if the product name was on the product page</li>
|
|
63
|
+
<li><code>nameInNode</code>: 2 points if the product name was the value of a text node on the product page</li>
|
|
64
|
+
<li><code>nameProp</code>: 3 points if the element containing that text node had an <code>itemprop="name"</code> attribute</li>
|
|
65
|
+
<li><code>price</code>: 1 point if a price appeared in the text content of the product page</li>
|
|
66
|
+
<li><code>priceProximity</code>: 4 points if the parent element of the product-name element has a price in its text content and has a descendant element with an <code>itemprop="price"</code> attribute, or 3 if this is true for a grandparent element, or 2 if true for a great-grandparent element, or 1 if true for a great-great-grandparent element.</li>
|
|
67
|
+
</ul>
|
|
68
|
+
<p>The precise rules of <code>spProductPrice</code> are found in the <a href="https://github.com/jrpool/testilo/blob/main/procs/score/spProductPrice.js">code itself</a>.</p>
|
|
69
|
+
<h2>Suggestions</h2>
|
|
70
|
+
<ul>
|
|
71
|
+
__suggestions__
|
|
72
|
+
</ul>
|
|
73
|
+
<h2>Report</h2>
|
|
74
|
+
<pre>__report__</pre>
|
|
75
|
+
<footer>
|
|
76
|
+
<p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
|
|
77
|
+
</footer>
|
|
78
|
+
</main>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
/*
|
|
2
|
+
index: digester for scoring procedure spA11yMessage.
|
|
3
|
+
Creator of parameters for substitution into index.html.
|
|
4
|
+
Usage example for selected files in REPORTDIR_SCORED: node digest dpA11yMessage 35k1r
|
|
5
|
+
Usage example for all files in REPORTDIR_SCORED: node digest dpA11yMessage
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
// CONSTANTS
|
|
9
|
+
|
|
10
|
+
// Newlines with indentations.
|
|
11
|
+
const joiner = '\n ';
|
|
12
|
+
const innerJoiner = '\n ';
|
|
13
|
+
|
|
14
|
+
// FUNCTIONS
|
|
15
|
+
|
|
16
|
+
// Makes strings HTML-safe.
|
|
17
|
+
const htmlEscape = textOrNumber => textOrNumber
|
|
18
|
+
.toString()
|
|
19
|
+
.replace(/&/g, '&')
|
|
20
|
+
.replace(/</g, '<');
|
|
21
|
+
// Gets a row of the score-summary table.
|
|
22
|
+
const getScoreRow = (component, score) => `<tr><th>${component}</th><td>${score}</td></tr>`;
|
|
23
|
+
// Adds parameters to a query for a digest.
|
|
24
|
+
exports.makeQuery = (report, query) => {
|
|
25
|
+
// Add an HTML-safe copy of the host report to the query to be appended to the digest.
|
|
26
|
+
const {script, host, score} = report;
|
|
27
|
+
const reportJSON = JSON.stringify(report, null, 2);
|
|
28
|
+
const reportJSONSafe = htmlEscape(reportJSON);
|
|
29
|
+
query.report = reportJSONSafe;
|
|
30
|
+
// Add the job data to the query.
|
|
31
|
+
query.dateISO = report.endTime.slice(0, 10);
|
|
32
|
+
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
33
|
+
if (host && host.what && host.which) {
|
|
34
|
+
query.org = host.what;
|
|
35
|
+
query.url = host.which;
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
const firstURLCommand = script.commands.find(command => command.type === 'url');
|
|
39
|
+
if (firstURLCommand && firstURLCommand.what && firstURLCommand.which) {
|
|
40
|
+
query.org = firstURLCommand.what;
|
|
41
|
+
query.url = firstURLCommand.which;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
console.log('ERROR: host missing or invalid');
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
// Add the score data to the query.
|
|
49
|
+
const scoreRows = [];
|
|
50
|
+
Object.keys(score).forEach(scoreName => {
|
|
51
|
+
scoreRows.push(getScoreRow(scoreName, score[scoreName]));
|
|
52
|
+
});
|
|
53
|
+
query.totalScore = score.total;
|
|
54
|
+
query.scoreRows = scoreRows.join(innerJoiner);
|
|
55
|
+
// Add suggestions to the query.
|
|
56
|
+
const suggestions = [];
|
|
57
|
+
if (score.pageLoad === 0) {
|
|
58
|
+
suggestions.push(['pageLoad', 'Make it possible to visit the page.']);
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
if (score.pageFast < 2) {
|
|
62
|
+
suggestions.push(['pageFast', 'Make the page load faster.']);
|
|
63
|
+
}
|
|
64
|
+
if (score.searchInput === 0) {
|
|
65
|
+
suggestions.push(['searchInput', 'Add a search input to the page.']);
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
if (score.searchType === 0) {
|
|
69
|
+
suggestions.push(['searchType', 'Give the search input the attribute <code>type="search"</code>.']);
|
|
70
|
+
}
|
|
71
|
+
if (score.searchWork === 0) {
|
|
72
|
+
suggestions.push(
|
|
73
|
+
['searchWork', 'Make it possible to submit a search query by pressing the Enter key.']
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
if (score.searchFast === 0) {
|
|
78
|
+
suggestions.push(['searchFast', 'Make search queries produce results faster.']);
|
|
79
|
+
}
|
|
80
|
+
if (score.nameInPage === 0) {
|
|
81
|
+
suggestions.push([
|
|
82
|
+
'nameInPage',
|
|
83
|
+
'Make the page after a product search contain the full name of the product.'
|
|
84
|
+
])
|
|
85
|
+
}
|
|
86
|
+
else if (score.nameInNode === 0) {
|
|
87
|
+
suggestions.push([
|
|
88
|
+
'nameInNode',
|
|
89
|
+
'Make the text content of an element on the product page be exactly the full name of the product.'
|
|
90
|
+
]);
|
|
91
|
+
}
|
|
92
|
+
else if (score.nameProp === 0) {
|
|
93
|
+
suggestions.push(
|
|
94
|
+
[
|
|
95
|
+
'nameProp',
|
|
96
|
+
'Give the product-name element the attribute <code>itemprop="name"</code>.'
|
|
97
|
+
]
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
if (score.price === 0) {
|
|
101
|
+
suggestions.push(['price', 'Place a price onto the product page.']);
|
|
102
|
+
}
|
|
103
|
+
else if (score.priceProximity < 4) {
|
|
104
|
+
suggestions.push(['priceProximity', 'Make the price element share a parent with the product-name element and give the price element the attribute <code>itemprop="price"</code>.']);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
query.suggestions = suggestions
|
|
110
|
+
.map(pair => `<li><code>${pair[0]}</code>: ${pair[1]}</li>`)
|
|
111
|
+
.join(innerJoiner);
|
|
112
|
+
};
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
Computes scores from Testaro script a11yMessage and adds them to a report.
|
|
6
6
|
Usage examples:
|
|
7
|
-
node score
|
|
8
|
-
node score
|
|
7
|
+
node score spA11yMessage 35k1r
|
|
8
|
+
node score spA11yMessage
|
|
9
9
|
|
|
10
10
|
This proc computes a score that is intended to represent how accessibly a web page offers
|
|
11
11
|
a user an opportunity to report an accessibility issue about that page. Scores can range
|
|
12
|
-
from perfect 0 to
|
|
12
|
+
from perfect 0 to 23.
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
// CONSTANTS
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
/*
|
|
2
|
+
spProductPrice
|
|
3
|
+
Testilo score proc productPrice
|
|
4
|
+
|
|
5
|
+
Computes scores from Testaro script productPrice and adds them to a report.
|
|
6
|
+
Usage examples:
|
|
7
|
+
node score spProductPrice 35k1r
|
|
8
|
+
node score spProductPrice
|
|
9
|
+
|
|
10
|
+
This proc computes a score that is intended to represent how accessibly a website offers
|
|
11
|
+
a user an opportunity to determine the price at which the website owner offers a product.
|
|
12
|
+
Scores can range from perfect 0 to 16.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
// CONSTANTS
|
|
16
|
+
|
|
17
|
+
// ID of this proc.
|
|
18
|
+
const scoreProcID = 'productprice';
|
|
19
|
+
|
|
20
|
+
// FUNCTIONS
|
|
21
|
+
|
|
22
|
+
// Returns whether a text contains a U.S. price.
|
|
23
|
+
const hasPrice = (text, isAll) => {
|
|
24
|
+
const matcher = '\\$ ?\\d*(?:,\\d{3})?(?:\\.\\d{2})?(?: *USD)?';
|
|
25
|
+
const trimText = text.trim();
|
|
26
|
+
if (isAll) {
|
|
27
|
+
return new RegExp(`^${matcher}$`).test(trimText);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
return new RegExp(matcher).test(trimText);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
// Recursively inspects a subtree for semantic marking.
|
|
34
|
+
const findPriceProp = (root, score) => {
|
|
35
|
+
// If no semantically marked price has been found yet:
|
|
36
|
+
if (! score.priceProp) {
|
|
37
|
+
// If the text of the root is exactly a price:
|
|
38
|
+
if (hasPrice(root.text, true)) {
|
|
39
|
+
// If it semantically marks the price as such:
|
|
40
|
+
if (root.attributes.some(
|
|
41
|
+
attribute => attribute.name === 'itemprop' && attribute.value === 'price'
|
|
42
|
+
)) {
|
|
43
|
+
// Add a score and stop looking.
|
|
44
|
+
score.priceProp = 3;
|
|
45
|
+
}
|
|
46
|
+
// Otherwise, i.e. if it does not semantically mark the price:
|
|
47
|
+
else {
|
|
48
|
+
// Inspect the children of the root.
|
|
49
|
+
root.children.forEach(child => {
|
|
50
|
+
findPriceProp(child);
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
// Scores a report.
|
|
57
|
+
exports.scorer = async report => {
|
|
58
|
+
const {acts} = report;
|
|
59
|
+
report.scoreProcID = scoreProcID;
|
|
60
|
+
report.score = {
|
|
61
|
+
pageLoad: 0,
|
|
62
|
+
pageFast: 0,
|
|
63
|
+
searchInput: 0,
|
|
64
|
+
searchType: 0,
|
|
65
|
+
searchWork: 0,
|
|
66
|
+
searchFast: 0,
|
|
67
|
+
nameInPage: 0,
|
|
68
|
+
nameInNode: 0,
|
|
69
|
+
nameProp: 0,
|
|
70
|
+
price: 0,
|
|
71
|
+
priceProximity: 0,
|
|
72
|
+
priceProp: 0
|
|
73
|
+
};
|
|
74
|
+
const {score} = report;
|
|
75
|
+
if (Array.isArray(acts)) {
|
|
76
|
+
// Act 1: If the page loaded:
|
|
77
|
+
if (acts[1].result.startsWith('http')) {
|
|
78
|
+
score.pageLoad = 2;
|
|
79
|
+
// Score how fast it loaded.
|
|
80
|
+
const loadTime = acts[1].endTime - acts[1].startTime;
|
|
81
|
+
if (loadTime < 4000) {
|
|
82
|
+
score.pageFast = 2;
|
|
83
|
+
}
|
|
84
|
+
else if (loadTime < 6000) {
|
|
85
|
+
score.pageFast = 1;
|
|
86
|
+
}
|
|
87
|
+
// Act 2: If the page has a search input:
|
|
88
|
+
const {result} = acts[2];
|
|
89
|
+
if (result.found) {
|
|
90
|
+
score.searchInput = 1;
|
|
91
|
+
// If it is a search-type input:
|
|
92
|
+
if (result.attributes && result.attributes.type === 'search') {
|
|
93
|
+
score.searchType = 2;
|
|
94
|
+
}
|
|
95
|
+
// If it works:
|
|
96
|
+
if (result.success) {
|
|
97
|
+
score.searchWork = 2;
|
|
98
|
+
// Score how fast it works.
|
|
99
|
+
const loadTime = acts[2].endTime - acts[2].startTime;
|
|
100
|
+
if (loadTime < 3000) {
|
|
101
|
+
score.searchFast = 3;
|
|
102
|
+
}
|
|
103
|
+
else if (loadTime < 5000) {
|
|
104
|
+
score.searchFast = 2;
|
|
105
|
+
}
|
|
106
|
+
else if (loadTime < 7000) {
|
|
107
|
+
score.searchFast = 1;
|
|
108
|
+
}
|
|
109
|
+
// Act 3: If the product is named on the result page:
|
|
110
|
+
let {result} = acts[3];
|
|
111
|
+
if (result && result.found) {
|
|
112
|
+
score.nameInPage = 2;
|
|
113
|
+
// Act 4: If the product is named by any text node:
|
|
114
|
+
result = acts[4].result;
|
|
115
|
+
if (result && result.nodeCount) {
|
|
116
|
+
score.nameInNode = 2;
|
|
117
|
+
// If any such text node semantically marks the name:
|
|
118
|
+
if (result.items.some(item => {
|
|
119
|
+
const parent = item.ancestors[0];
|
|
120
|
+
return parent.attributes.some(
|
|
121
|
+
attribute => attribute.name === 'itemprop' && attribute.value === 'name'
|
|
122
|
+
);
|
|
123
|
+
})) {
|
|
124
|
+
score.nameProp = 3;
|
|
125
|
+
}
|
|
126
|
+
// Act 4: If a price appears in the text content of an ancestor:
|
|
127
|
+
const priceInContext = result.items.some(
|
|
128
|
+
item => item.ancestors.some(
|
|
129
|
+
ancestor => ancestor.text && hasPrice(ancestor.text, false)
|
|
130
|
+
)
|
|
131
|
+
);
|
|
132
|
+
if (priceInContext) {
|
|
133
|
+
score.price = 1;
|
|
134
|
+
// Act 4: Proximity and semantic specification of a price.
|
|
135
|
+
let priceDistance = Infinity;
|
|
136
|
+
// For each text node containing the product name:
|
|
137
|
+
result.items.forEach(item => {
|
|
138
|
+
// Get the distance to the nearest ancestor with a price in its text content.
|
|
139
|
+
const itemPriceDistance = item.ancestors.findIndex(
|
|
140
|
+
ancestor => ancestor.text && hasPrice(ancestor.text, false)
|
|
141
|
+
);
|
|
142
|
+
// If that distance is less than the smallest one found yet:
|
|
143
|
+
if (itemPriceDistance > -1 && itemPriceDistance < priceDistance) {
|
|
144
|
+
// Update the smallest one found.
|
|
145
|
+
priceDistance = itemPriceDistance;
|
|
146
|
+
// Inspect its subtree for a semantically marked price.
|
|
147
|
+
findPriceProp(item, score);
|
|
148
|
+
}
|
|
149
|
+
// Update the price-proximity score.
|
|
150
|
+
score.priceProximity = Math.max(0, 6 - priceDistance);
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
score.total = Object.values(score).reduce((total, current) => total + current);
|
|
160
|
+
};
|