如何在Protractor中定位ng-reflect ng-class属性？元素定位失败求助

Let's break down the issues in your test code and fix them step by step:

1. Correct the CSS Locator Syntax #

Your current CSS selector has two critical mistakes:

• Class selectors in CSS require a leading dot (.) to target elements by class name
• You misspelled one of the class names: the HTML uses typ-user, but your code wrote type-user

Wrong code snippet:

element(by.css("bs-massage type-user active").sendKeys("username1"));

Corrected version (also fixed the missing closing parenthesis):

element(by.css(".bs-massage.typ-user.active")).sendKeys("username1");

2. Fix the ID Locator Mismatch #

In your provided HTML, the element's ID is msg_user_step_2, but your test code is trying to locate an element with msg_user_step_3 — this mismatch is a direct reason Protractor can't find the element. Update the ID to match the actual HTML:

Wrong:

var el = element(by.id('msg_user_step_3'));

Correct:

var el = element(by.id('msg_user_step_2'));

3. Important Note: sendKeys() Works on Interactive Elements #

Wait a quick heads-up — the element you're targeting is a <div> containing a <p> tag. The sendKeys() method is designed for interactive input elements like text fields, textareas, or content-editable elements. If you're trying to edit the text "cvds sadf", you'll likely need to click the .btn-edit button first to activate an editable state, then send keys to the actual input/editable field that appears.

Example workflow for editing:

// Click the edit button to enable editable mode
element(by.css(".bs-massage.typ-user.active .btn-edit")).click();

// Now target the editable element and send keys
var editableEl = element(by.id('msg_user_step_2'));
editableEl.sendKeys("username1");

Full Corrected Test Code #

describe("Application Form", function() {
  it("DETAILS", function() {
    browser.get("http://localhost:4200/online-application-form.html/Personal");
    
    // Optional: Add a wait to ensure elements are loaded (if needed)
    var EC = protractor.ExpectedConditions;
    var editBtn = element(by.css(".bs-massage.typ-user.active .btn-edit"));
    browser.wait(EC.elementToBeClickable(editBtn), 5000);
    
    // Activate edit mode
    editBtn.click();
    
    // Target the correct element and send input
    var targetEl = element(by.id('msg_user_step_2'));
    browser.wait(EC.visibilityOf(targetEl), 5000);
    targetEl.sendKeys("username 2");
  });
});

内容的提问来源于stack exchange，提问作者Dev