Use protractor on an non angular page

Question

in my recent test I need to first login and take some actions on an non angular page (https://www.qa.dealertrack.com/default1.aspx) then switch to an angular page and finish the test. In conf I have

global.driver = browser.driver;

My page object looks like:

                var LogInPage = function() {
                    this.loginUrl = 'https://www.qa.dealertrack.com/default1.aspx';
                    this.id = browser.driver.findElement(by.name('username'));
                    this.password = browser.driver.findElement(by.name('password'));
                    this.loginButton = browser.driver.findElement(by.name('login'));

                    this.logIn = function(id, password) {
                        // maximize window
                        driver.manage().window().maximize();
                        // log in
                        driver.get('https://www.qa.dealertrack.com/default1.aspx');
                        this.id.sendKeys(id);
                        this.password.sendKeys(password);
                        this.loginButton.click();
                    }
                };

My test looks like:

                describe('Sample Test - Log In', function() {
                    var loginPage = require('../pages/LogInPage.js');

                    /**
                     * Disable waiting for AngularJS for none Angular page
                     */
                    beforeEach(function() {
                        isAngularSite(false);
                    });

                    it('logging in', function() {
                        loginPage.logIn('xxx', 'xxx');
                    })
                })

However, even before getting to the site, protractor throws error NoSuchElementError: no such element: Unable to locate element:{'method':'name','selector':'username'}

But when I commented out all the element variables and related lines, only left

driver.get(this/loginUrl); 

It worked. Why would browser.driver.get works but browser.driver.findElement does not?

This is my first question on Stackoverflow. Thank everyone!!

Answer 1

Before login you need to set

browser.driver.ignoreSynchronization=true;

So it shold be like

browser.driver.ignoreSynchronization=true;
login();
browser.driver.ignoreSynchronization=false;

Answer 2

I tried to removed all the elements I declared outside my functions in page object. Instead of that, I just hard code the elements in the function. And it worked.