無法使用查找元素量角器/茉莉，可能是因爲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的有效性。