CODEWITHSUNDEEP
testingjasmineprotractor
Pix81
Pix81

Reputation: 675

Unable to find element using protractor/jasmine, possibly because sendKey error

I'm getting:

Failed: No element found using locator

no matter how I program the locator (I've tried by css, by xpath, by ID.. nothing).

The webpage I'm using: https://phptravels.org/clientarea.php?incorrect=true

I should be able to get an error message after entering an incorrect username and password. The error message is stored in the CSS selector .alert.alert-danger.text-center. The error displayed is 'Login Details Incorrect. Please try again.'

No matter how I format this, I get the same element not found issue, but also when invoking sendKeys, it seems to work. That is, if I take out the offending line of code for the error message, the rest of the program passes with no errors, and thus sendKeys should be working, but when running the program I don't observe anything actually being entered in the input boxes (Unless it's entering the sendKey information and clicking the button so fast I can't see it? But then why isn't the rest of the program lightning fast?). So I'm not sure if this is actually an element not found or a sendKey error. Also, I've looked through several answers on here and there are several Wait type libraries, but when I try to use that information in my program I just get more errors.

Here is my code: 

// newSpec.js

browser.waitForAngularEnabled(false);

describe('Protractor Demo App', function() {
it('should have a title', function() {
browser.get('http://phptravels.com/demo');

expect(browser.getTitle()).toEqual('PHPTRAVELS | Demo');
});
});

describe('Login function', function() {
it('should be able to login', function() {
browser.findElement(by.linkText('Login')).click();
expect(element(by.xpath('//div[@class="login"]')).isPresent());

}); 
});



describe('Enter name', function() {
var inputEmail = element(by.css('#inputEmail'));
var inputPassword = element(by.css('#inputPassword'));  
var goButton = element(by.css('#login'));

it('should be able to enter user name', function() {
browser.get('https://phptravels.org/clientarea.php');

     inputEmail.sendKeys('Test Test');
     inputPassword.sendKeys('Password123');


     browser.sleep(500); 
 goButton.click();
     browser.sleep(500); 

 var errorMessage = element(by.id('#.alert.alert-danger.text-center'));
 expect(errorMessage.getText()).toEqual('   Login Details Incorrect. Please        try again. ');

 });
});

Upvotes: 2

Views: 1420

Answers (1)

alecxe
alecxe

Reputation: 473833

You are trying to use a CSS selector inside the by.id locator.

Use by.css or a $ shortcut:

var errorMessage = $('.alert.alert-danger');

You can then enforce it with an Explicit Wait to address a possible timing issue:

var errorMessage = $('.alert.alert-danger');

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(errorMessage), 5000);

expect(errorMessage.getText()).toEqual('Login Details Incorrect. Please        try again.');

I also think you should call waitForAngularEnabled() inside the test itself. This is what is working for me:

describe('Enter name', function() {
    var inputEmail = element(by.css('#inputEmail'));
    var inputPassword = element(by.css('#inputPassword'));
    var goButton = element(by.css('#login'));

    it('should be able to enter user name', function() {
        browser.waitForAngularEnabled(false);
        browser.get('https://phptravels.org/clientarea.php');

        inputEmail.sendKeys('[email protected]');
        inputPassword.sendKeys('Password123');

        browser.sleep(500);
        goButton.click();
        browser.sleep(500);

        var errorMessage = $('.alert.alert-danger');
        expect(errorMessage.getText()).toEqual('Login Details Incorrect. Please try again.');

    });
});

A note about the "by id" locator problem:

Note that (shameless self-promotion), you could've caught this problem much earlier, if you would have used ESLint static code analysis tool in conjunction with eslint-plugin-protractor plugin - there is a valid-by-id rule that checks the validness of id passed to by.id.

Upvotes: 3

Related Questions