无法使用查找元素量角器/茉莉，可能是因为sendKey错误

Question

我越来越：

失败：没有找到元素使用定位器

不管我怎么编程定位器（I”已经通过css，由xpath，通过ID ..没有）尝试。

我使用的网页：https://phptravels.org/clientarea.php?incorrect=true

我应该能够进入一个不正确的用户名和密码后收到一条错误消息。错误消息存储在CSS选择器.alert.alert-danger.text-center中。显示的错误是'登录详细信息不正确。请再试一次。'

无论我如何格式化，我得到相同的元素找不到问题，但也调用sendKeys时，它似乎工作。也就是说，如果我将错误消息的代码行取出来，程序的其余部分不会发生错误，因此sendKeys应该可以正常工作，但是在运行程序时，我没有注意到实际上正在输入的任何内容输入框（除非它输入sendKey信息，并且如此快地点击按钮我看不到它？但是为什么程序的其余部分不是很快？）。所以我不确定这是否是一个未找到的元素或sendKey错误。另外，我在这里查看了几个答案，并且有几个Wait类型的库，但是当我尝试在我的程序中使用这些信息时，我只是得到更多的错误。

这里是我的代码：

// 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. '); 

}); 
}); 

Answer 1

您正在尝试使用by.id定位器内部的CSS选择器。

使用by.css或$快捷：

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

然后，您可以用Explicit Wait强制执行，以解决可能的计时问题：

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.'); 

我也想你应该叫waitForAngularEnabled()测试中本身。这是为我工作：

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('Test@test.com'); 
     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.'); 

    }); 
}); 

---

关于“按ID”定位问题的说明：

注意，（无耻的自我推销），你有可能会陷入很多这个问题如果您以前使用过ESLint静态代码分析工具和eslint-plugin-protractor plugin - valid-by-id rule会检查传递给by.id的id的有效性。