protractor no element found using locator by cssselector?

Question

Getting my head around protractor... How can I access a button element on an angularjs page that looks like this:

<button class="button primary">Save</button>

Using this in my test:

element(by.css('button primary')).click();

Getting an error:

NoSuchElementError: No element found using locator: By.cssSelector("button primary")

How can I fix this?

Solution 1

element(by.css('button.button.primary')).click();

Solution 2

There are a few selectors to use, depending on the state of the application. Personally, as we speak I am developing a site that has lots of buttons styled with the same class (for styling, fonts etc) and it can get quite annoying when there might be more than one button with the same class on one page so you might want to give it a special, unique id or select using button text, which is easiest in my opinion:

element(by.buttonText('Save')).click();

But it is a matter of preference , Only sharing my opinion. Have a good day! :)

Solution 3

element(by.buttonText('Save')).click();