score:0
you can now use protractor-react-selector to identify web elements by react's component, props, and state. this will automatically wait to load react in your app and then identify the web elements. it can save you from doing an extra ton of workarounds.
you can identify your target element by:
const myelement = element(
by.react('mycomponent', { somebooleanprop: true }, { somebooleanstate: true })
);
find out some sample tests here
let me know if this helps!
score:3
the way i solved the problem is to start several processes or services in order to test e2e with mocha:
- webserver: i start a simple webserver (like express) that provides the webpack build packages (https://www.npmjs.com/package/express)
- selenium: for controlling the browser (https://www.npmjs.com/package/selenium-standalone)
- mocha within a 'child_process' fork
this looks in my test_runner.js file following which i start with 'node test_runner.js':
var async = require('async');
var web_runner = require('./web_server');'
//... and other runner scripts
var start = function () {
console.log('starting services:');
async.series([
function (callback) {
web_runner.start(args[0], callback);
},
function (callback) {
selenium_runner.start(callback);
},
function (callback) {
mocha_runner.start(args[0], args[1], callback);
},
function (callback) {
selenium_runner.stop(callback_stop, 0);
mock_runner.stop(callback_stop);
web_runner.stop(callback_stop);
callback();
}
]);
};
start();
once the test is done the function stops all services.
the webserver should be no problem to start. i had some difficilises with the selenium start and found a nice way here: https://github.com/nkbt/nightwatch-autorun/blob/master/index.js
var selenium = require('selenium-standalone');
function onseleniumstarted(err, seleniumchild) {
if (err) {
process.exit(1);
}
process.on('uncaughtexception', err2 => {
console.error(err2.stack);
seleniumchild.kill('sigint');
process.exit(1);
});
startserver(onserverstarted(seleniumchild));
}
function onseleniuminstalled(err) {
if (err) {
console.error(err.stack);
process.exit(1);
}
selenium.start({seleniumargs: ['-debug']}, onseleniumstarted);
}
selenium.install({}, onseleniuminstalled);
the mocha is then basically a node process that starts and looks like this in javascript:
module.exports = {
start: function (env, test_path, callback) {
var env_mocha = {env: process.env.env = env};
console.log('start mocha with:', env_mocha, mocha, test_path);
cp.fork(mocha,
[
test_path
], [
env_mocha
])
.on('error', function (error) {
runner.stop(error);
return process.exit(1);
})
.on('close', function (code) {
callback();
});
},
stop: function (reason) {
return process.exit(reason);
}
}
now the test cases have to use a selenium driver. i choose webdriverio, but there are other alternatives (see here: http://www.slant.co/topics/2814/~node-js-selenium-webdriver-client-libraries-bindings)
var env = process.env.env;
var webdriverio = require('webdriverio');
var assert = require('assert');
describe('file: some_test_spec', function () {
var client = {};
before(function (done) {
client = webdriverio.remote({desiredcapabilities: {browsername: 'chrome'}});
client.init(done);
});
after(function (done) {
client.end(done);
});
describe('login success', function () {
before(function (done) {
// user needs to be logged in
client
.url(url_start)
.waitforvisible('#comp\\.user\\.login\\.button', 1000)
.setvalue('#comp\\.user\\.login\\.email', 'my@email.com')
.setvalue('#comp\\.user\\.login\\.password', 'mysecret')
.click('#comp\\.user\\.login\\.button')
.waitforvisible('#comp\\.user\\.home', 1000)
.call(done);
});
});
});
last note: phantomjs does not work with the .bind(this) function of react, therefore the phantomjs browser is no option at the moment. reason is explained here: https://groups.google.com/forum/#!msg/phantomjs/r0hpomncupc/uxusqsl2lnoj
hope this helped ;) good luck.
Source: stackoverflow.com
Related Query
- Integration/Acceptance testing of a ReactJS App
- Continuous Integration with vsts, web app asp.net core 2.0 with reactjs fails webpack
- How to fix an error with shallow Enzyme in testing ReactJS App
- Share codebase using common Sdk module in create react app Reactjs application
- ReactJS APP in Heroku "Invalid Host header" HOST configuration?
- Cytoscape and ReactJS integration
- reactjs - jest snapshot testing nested redux "connected" components
- ReactJS deploy app error Cannot copy to clipboard: Command failed: xsel --clipboard --input
- Implementing Facebook comments plugin in ReactJS app
- Can I deploy my ReactJS app on a regular host?
- How to use media print within Reactjs web app
- How to customize bootstrap 4 in reactjs app with reactstrap dependency?
- Redux - ReactJS app does not rerender (although JSON.parse for new object)
- ReactJs app crashes with error "Consider adding error boundaries to your tree"
- How do you test a reactjs web app with selenium?
- Phonegap app with reactjs
- Reactjs - Get a component from anywhere in the app
- ReactJS app doesn't work on mobile
- Managing 'window' object in Isomorphic App with ReactJS and Flask Python
- ReactJS App on PHP backend - how to hot reload on local machine?
- ReactJS app published to Github pages with custom domain
- Unit Testing Jest in Reactjs Component state
- Semantic UI sidebar throws console errors with ReactJS when render app to body
- Creating an installer for Electron React JS app - reactJS component doesn't load when run after install
- How to fix "Failed to load resource: net::ERR_FILE_NOT_FOUND" for static images on cordova app using Reactjs and create-react-app
- How to add ReactJS to existing node.js backend app
- Can I use Create React App Jest Testing with a test reporter without ejecting?
- Static hosting - ReactJS app on Azure Blob storage with Azure CDN
- adding service worker to reactjs app
- ReactJS app displays whitescreen using Kubernetes Ingress
More Query from same tag
- use useImperativeHandle in function component with typescript,it will tips some error;
- Drupal GraphQL logic for Resolver for a field with multiple values
- React Formik use submitForm outside <Formik />
- How to run onSubmit={} only after the props have updated?
- react-big-calendar: How make a popup with onSelectEvent
- React - How do I handle checkbox data correctly
- Show div when there's not data available in getServerSideProps with NextJS?
- reactjs try catch in render does not catch children errors
- Windows screen scale messing up css sizes
- How to disable a specific row to be draggable in AG table?
- Is this the correct way to copy state in a Redux Reducer?
- How do I integrate my Submit function in Formik
- React Native Firebase auth().signInWithPhoneNumber() return unexpected error in Release APK
- React - Input in table row loses focus on input
- Propagate function error from parent component to child component in React while making API request
- How to adjust the width of the form control in React-Bootstrap
- React JS, unable to redirect component
- How to avoid passing "key" as argument to map, reduce or filter while iterating the key value pairs using Object.entries?
- Underline showing in Material -UI InputBase component
- react-router browserHistory.push doesn't navigate to new page
- How to make the Value in the inputText dynamic?
- Mui-Datatable onTableChange is not working when adding a setState
- How can I take only few property from my array objects in js
- React: Setting input state inside useEffect not working
- Differences in passing the data as a parameter or taking it from event object in event handlers functions?
- AG-Grid with Redux
- Responsive screen size has play when on small screen
- Why does the callback on addEvenetListener print out old state?
- React Redux Reducer triggered but not changing state
- Collection name auto convert to plural in reactjs and mogoDB?