Giter VIP home page Giter VIP logo

nemo-accessibility's Introduction

nemo-accessibility

nemo-accessibility is a nemo plugin aimed to run accessibility scans during nemo tests. nemo-accessibility plugin uses axe-core, htmlcode smiffer and chrome engines to run accessibility scans on a given page or on a given element on a page.

How to Use

  1. Install this package npm install nemo-accessibility --save-dev
  2. Add nemo-accessibility to your config/nemo-plugins.json file like below
 "nemo-accessibility":{
        "module":"nemo-accessibility",
      "arguments": [
                    {
                       "engine":"axe"
                       "engine":"chrome"
                       "engine":"htmlcs"
                    }
                  ]
    }
  1. Call Scan method let results= await nemo.accessibility.scan({'project': 'mynodewebproject', 'page': 'somepageName'})

Details

Once nemo-accessibility plugin is registered, you should now have nemo.accessibility namespace available in your tests. nemo.accessibility exposes a method called scan to help you run accessibility evaluation against your page/element.

scan method returns a promise with resulting json` response and you can then write the HTML to a file or parse JSON response for later reporting. For example,

   nemo.driver.get('http://www.paypal.com');
   nemo.accessibility.scan().then(function (result) {
     fs.writeFile('report/accessibility.json', result, function (err) {
         done();
     });
   });

See usingNemoAccessibility.js. You can run that on Debug mode like DEBUG=nemo* node node_modules/nemo-accessibility/example/usingNemoAccessibility.js

Support

Please file a Nemo a11y plugin issue for any nemo plugin related questions or file a issue for AATT for any AATT related questions

Copyright and License

Copyright 2019, PayPal under the BSD license.

Contributors

nemo-accessibility's People

Contributors

duaneobrien avatar mpnkhan avatar nikulkarni avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nemo-accessibility's Issues

Report is generated in JSON format

Hello,

It looks like I have set everything up but regardless of settings (engine, output, etc.) getting output report in JSON format.

Below are some of my configurations.

config.json

"driver": {
"browser": "chrome"
},
"plugins": {
"nemo-accessibility": {
"module": "path:../",
"arguments": [
{
"accessibilityApiUrl" : "http://localhost:3000/evaluate",
"engine":"axe" // axe, chrome, htmlcs
}
]
},
"view": {
"module": "nemo-view",
"arguments": ["path:../locator"]
}
}
}

package.json

{
"name": "nemo-accessibility",
"version": "4.0.0",
"dependencies": {
"nconf": "^0.10.0",
"nemo": "^2.0.0",
"nemo-core": "^1.1.0",
"nemo-view": "^3.1.0",
"request": "^2.88.0"
},
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/paypal/nemo-accessibility.git"
},
"keywords": [
"nemo",
"accessibility",
"plugins",
"paet"
],
"author": [
"Nilesh Kulkarni [email protected]",
"Prem Nawaz Khan [email protected]"
],
"license": "MIT",
"devDependencies": {
"debug": "^4.1.1",
"nemo-accessibility": "^4.0.0"
}
}

dynamicpage.js
var Nemo = require('nemo');
var fs = require('fs');
var debug = require("debug"),
log = debug("nemo-accessibility:log"),
error = debug("nemo-accessibility:error");

var url = 'http://localhost/test/bs_modal_dynamic/donate.html';

var nemo = Nemo(process.cwd()+'/example',function(err){
if(!err) {
nemo.driver.get(url);
log('Testing url: ' + url)

var options = {
  'engine' : 'axe'
};        
nemo.accessibility.scan(options).then(function (result) {
    var file = process.cwd() + '/example/report/entirePage.html';
    fs.writeFile(file, result,function (err) {
       console.log('Successfully wrote the file ' + file);
    });
});

var btn= nemo.view._find('css:#btnDonate');    
var scanElement= nemo.view._find('css:#myModal');    

btn.click();
nemo.driver.sleep(2000);  //Just to show the form for some time

var options = {
        'source': 'btnDonate',
        'element': scanElement,
        'engine' : 'axe'
    };
nemo.accessibility.scan(options).then(function (result) {
    var file = process.cwd() + '/example/report/scanAnElement.html';
    fs.writeFile(file, result, function (err) {
        console.log('Successfully wrote the file ' + file);
    });
});

nemo.driver.quit();

} else {
console.log(err);
}
});

But upon running getting results in following format

{"results":[{"id":"landmark-one-main","description":"Ensures the page has only one main landmark and each iframe in the page has at most one main landmark","help":"Page must have one main landmark","impact":"moderate"},{"id":"meta-viewport","description":"Ensures does not disable text scaling and zooming","help":"Zooming and scaling must not be disabled","impact":"critical"},{"id":"region","description":"Ensures all page content is contained by landmarks","help":"All page content must be contained by landmarks","impact":"moderate"}]}

Am I missing something in configuration?

Error: Parse Error when trying to run the test file

hi @mpnkhan ,

I am trying to implement this nemo-accessibility for my project. I have given the following in the config file
{
"driver": {
"browser": "firefox"
},
"plugins": {
"nemo-accessibility": {
"module": "path:../",
"arguments": ["http://127.0.0.1:8081/evaluate"]
},
"view": {
"module": "nemo-view"
}
}
}

And when i try to run usingNemoAccessibility.js, getting the below error:

$ node example/usingNemoAccessibility.js
Nemo initialized successfully
C:\Users\391533\nemo-accessibility\node_modules\selenium-webdriver\lib\goog\asyn
c\nexttick.js:39
goog.global.setTimeout(function() { throw exception; }, 0);
^

Error: Parse Error
at Error (native)
at Socket.socketOnData (_http_client.js:359:20)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at readableAddChunk (_stream_readable.js:172:18)
at Socket.Readable.push (_stream_readable.js:130:10)
at TCP.onread (net.js:542:20)

I am new to this testing, can you please help me out to solve this issue?

Report is generated without any test results, only blank report is generated

hi @mpnkhan ,

@nikulkarni

Please reply Sir. This is the final step of implementing this AATT in our project. If you can help it will be really helpful for me to use this AATT.

After scanning is done, report is getting generated, but there is nothing inside the report. While launching the report it says "Unable to load the address"

Used browser:chrome and engine:chrome

$ DEBUG=nemo* node example/usingNemoAccessibility.js
nemo:log new Nemo instance created +0ms
nemo:log constructor: basedir + callback +3ms
nemo:log confit options { protocols:
{ path: [Function: pathHandler],
env: [Function: envHandler],
argv: [Function: argHandler] },
basedir: 'C:\Users\391533\nemo-accessibility\example\config' } +1ms
nemo:log register plugin nemo-accessibility +30ms
nemo:log modulePath nemo-accessibility +0ms
nemo:log register plugin view +145ms
nemo:log modulePath nemo-view +0ms
nemo:log new Setup instance created +44ms
nemo:log entering doSetup +1ms
nemo:log Capabilities { caps_: { browserName: 'chrome' } } +1ms
nemo:log builder FINAL { flow_: null,
url_: '',
proxy_: null,
capabilities_: { caps_: { browserName: 'chrome' } },
chromeOptions_: null,
firefoxOptions_: null,
operaOptions_: null,
ieOptions_: null,
safariOptions_: null,
ignoreEnv_: false } +0ms
nemo-view:log plugin setup is called +3s
nemo-view:log creating Locreator instance +1ms
nemo-view:log adding generic methods +0ms
Nemo initialized successfully
nemo-accessibility:log Now scanning with error level +0ms 1,2,3
nemo-accessibility:log Accessibility url +1ms http://127.0.0.1:80/evaluate
Successfully wrote the file C:\Users\391533\nemo-accessibility\example\defaultOptions.html

But there is nothing in the file.

If i used the engine: htmlcs option, socket gets hanged up.

TypeError: nemo.accessibility.scan(...).then is not a function

I am trying to do some accessibility testing for a web app and am currently stuck with the following issue.
TypeError: nemo.accessibility.scan(...).then is not a function
The versions of node and node modules used are as below.
node 8.9.4
"mocha": "4.1.0",
"nemo": "3.0.1",
"nemo-accessibility": "2.0.1",
"nemo-view": "2.2.3"

I have confirmed AATT server is up and running on localhost:3000.

below is the example code that will reproduce the error.
spec.js

var basedir = require('path').resolve(__dirname, '..');
var Nemo = require('nemo');
var nemo;
describe('accessibility test suite', function () {
    before(function (done) {
        nemo = Nemo(basedir, function (err) {
            if (err) {
                return done(err);
            }
            done();
        });
    });
    after(function (done) {
        nemo.driver.quit().then(done);
    });
    it('should automate the browser', function (done) {
        nemo.driver.get(nemo.data.baseUrl);
        nemo.driver.sleep(3000);
        nemo.accessibility.scan().then(function (result) {
            var file = process.cwd() + '/example/report/entirePage.html';
            fs.writeFile(file, result, function (err) {
                console.log('Successfully wrote the file ' + file);
            });
        });
        nemo.driver.sleep(3000).then(function () {
            done();
        }, function (err) {
            done(err);
        })
    });
});

config.json

{
    "plugins": {
        "view": {
            "module": "nemo-view",
            "arguments": ["path:locator"]
        },
        "nemo-accessibility": {
            "module": "nemo-accessibility",
            "arguments": ["http://localhost:3000/evaluate"]
        }
    },
    "driver": {
        "browser": "chrome"
    },
    "data": {
        "baseUrl": "https://www.paypal.com/"
    }
}

run the test
node_modules/.bin/mocha test/functional/spec/*.js --timeout 30000 --reporter spec

error
TypeError: nemo.accessibility.scan(...).then is not a function

Looks like for some reason, scanElement in nemo-accessibility module is not returning a promise. I have tried specifying a particular element using the 'element' option but that also did not help.

TypeError: driver.executeScript is not a function

I have been struggling with this issue for quite long now. I am trying to run the test on a particular element using the nemo_view plugin.

I get this error continuously ---

1) nemo-view will run scan on a modal:
     TypeError: driver.executeScript is not a function
      at Object.scan (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\index.js:116:20)
      at Context.<anonymous> (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\test\formSpec.js:64:28)
      at callFnAsync (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runnable.js:349:8)
      at Test.Runnable.run (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runnable.js:301:7)
      at Runner.runTest (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runner.js:422:10)
      at D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runner.js:528:12
      at next (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runner.js:342:14)
      at D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runner.js:352:7
      at next (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runner.js:284:14)
      at Immediate._onImmediate (D:\UI PRAC\AATT\aatt_nemo\nemo-accessibility\node_modules\mocha\lib\runner.js:320:5)

I have done a lot of trial & errors but all in vain. Need help in getting this running.

I was able to run the page-level test with success. But the element level scan is not working.

This is what I am trying

    it('will run scan on a modal', function (done) {
        nemo.driver.get(nemo.data.urls.home);

        var element = nemo.view.modal.myModal();
        // var element = nemo.view._find('css:#myModal');
        var options = {
            'priority': ['P1', 'P2'],
            'element': element,
            'engine': 'htmlcs'
        };
        nemo.accessibility.scan(options).then(function (result) {
            fs.writeFile(process.cwd() + '/app_test/report/modal.html', result, function (err) {
                done();
            });
        });
    });

my config

{
    "driver": {
        "browser": "phantomjs"
    },
    "plugins": {
        "nemo-accessibility": {
            "module": "path:../",
            "arguments": [
                {
                    "accessibilityApiUrl": "http://localhost:3000/evaluate",
                    "engine": "chrome"
                }
            ]
        },
        "view": {
            "module": "nemo-view",
            "arguments": ["path:../locator"]
        }
    },
    "data": {
        "urls": {
            "home": "http://localhost:8000"
        }
    }
}

my nemo_view locator

{
    "myModal": {
        "locator": "#myModal",
        "type": "css"
    }
}

License still references eBay

The license for this project still references the eBay Software Foundation. As part of the split earlier this year, copyright for this project was assigned from the eBay Software Foundation to PayPal.

errLevel option is not honored

I am passing 'errLevel': '1' as an option but the report contains all errors, warnings, and notices. Looks like scan method takes priority as an option. Is priority different then errLevel? When I pass 'priority' : 'p1', as an option the report still contains error, warnings and notices.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.