how to use Protractor on non angularjs website?
If your test needs to interact with a non-angular page, access the webdriver instance directly with browser.driver
.
Example from Protractor docs
browser.driver.get('http://localhost:8000/login.html');
browser.driver.findElement(by.id('username')).sendKeys('Jane');
browser.driver.findElement(by.id('password')).sendKeys('1234');
browser.driver.findElement(by.id('clickme')).click();
Use protractor to test login on non-AngularJS page
Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.
I suggest you upgrade Protractor to latest (1.5.0 as of now), use a custom function waitReady() that browser.wait
for elements ready and rewrite your test like below.
// TODO: use page objects
var loginNameInputElm = $('#login_field'); // or element(by.id('login_field'))
var passwordInputElm = $('#password'); // same as element(by.id('password'))
var loginBtnElm = $('button[type=submit]');
it('non-angular page so ignore sync and active wait to load', function() {
browser.ignoreSynchronization = true;
browser.get(process.env.HOST + '/auth/github');
expect(loginNameInputElm.waitReady()).toBeTruthy();
expect(passwordInputElm.waitReady()).toBeTruthy();
});
it('should fill user and password and logins', function() {
loginNameInputElm.sendKeys(process.env.USERNAME);
passwordInputElm.sendKeys(process.env.PASSWORD);
loginBtnElm.click();
});
it('restores ignore sync when switching back to angular pages', function() {
browser.ignoreSynchronization = false; // restore
browser.get('/some-angular-page');
});
More details of why waitReady
here.
Note: in the past I've suggested setting a high implicit, e.g.
browser.manage().timeouts().implicitlyWait(5000);
That hack allows to you avoid waitReady
and keep using the standard
expect(loginNameInputElm.isPresent()).toBeTruthy();
But has an ugly disadvantage when testing for elements NOT present, i.e. when testing for absent or non visible elements in which case it will wait 5 seconds (5000ms) in vane, e.g. when doing
expect(someNonExistingElm.isPresent()).toBeFalsy();
Test login with protractor on a non angular page
You need to use
browser.driver.get
instead of browser.get for Non-Angular pages. Also, you need to set
browser.driver.ignoreSynchronization = true in the beforeEach() function
I have added a page for non-angular pages. You can refer to the same:
https://github.com/sakshisingla/Protractor-Non-Angular-Tests/wiki/Creating-test-scripts-using-Protractor-for-non-angular-application
Related Topics
Difference Between Date(Datestring) and New Date(Datestring)
The Definitive Best Way to Preload Images Using JavaScript/Jquery
How to Make a Shared State Between Two React Components
How to Get Objects Value If Its Name Contains Dots
How to Bring a Circle to the Front with D3
Dynamic Template Urls in Angular 2
Filter Array of Objects by Multiple Properties and Values
How to Pause Setinterval() Functions
Where Do the Parameters in a JavaScript Callback Function Come From
Splitting a Js Array into N Arrays
How to Pre-Populate a Jquery Datepicker Textbox with Today's Date
How to Use Componentwillmount() in React Hooks
How to Prevent Closing Browser Window
Access JavaScript Property Case-Insensitively
How to Check If a Custom Protocol Supported