Select radio button value in Protractor

Question

I have a form with three radio buttons.

<form name="contact">
    <label>Type</label>
    <label>
        <input type="radio" id="car" value="car" checked>Car
    </label>
    <label>
        <input type="radio" id="boat" value="boat">Boat
    </label>
    <label>
        <input type="radio" id="home" value="home">Home
    </label>
</form>

I'm writing integrated tests in Protractor.

I'm having problems selecting a radio button value. I've tried clicking by ID:

//click boat 
element(by.id('boat')).click();

When I run my test, I get the following error:

Message:
  Failed: No element found using locator: By(css selector, *[id="boat"])
Stack:
  NoSuchElementError: No element found using locator: By(css selector, *[id="boat"])

Answer 1

This appears to work...

setup:

• protractor 4.0.10
• selenium standalone server 2.53.1
• chromedriver 2.25

config.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}

spec.js:

describe('form', () => {
  it('should click boat', () => {
    // test page using the html above. generated a non-angular page
    // on port 8000
    browser.ignoreSynchronization = true;
    browser.get('http://localhost:8000/index.html');

    element(by.id('boat')).click();

    // pause to take a screenshot
    browser.pause();
  });
});

html screenshot running up to the browser.pause (opened up dev tools to show the html):