Protractor / Web Driver : Detect when Class is added to Element

2
votes

Here is the code for the button. Basically when the button is clicked, it turns blue

 <button id="testbutton" type="button" ng-class="selected('test')" ng-click="isMultiple('test')">test</button>

In the Browser it basically goes from

class = btn btn-block btn-lg ts-btn-default

To

class = btn btn-block btn-lg ts-btn-blue

I have an var for the original element already. How do I get protractor to detect the ts-btn-blue being put in? Should I just make another element with the different class and do an

isdiplayed()

for that one or is there a better way?

1
selenium-webdriverprotractor

1 Answers

2
votes

Check for class present after the click:

expect(yourElm.getAttribute('class')).toContain('ts-btn-blue');

If you encounter timing issues, like your tests failing because the expect() runs before the html actually gets to the DOM, you may find useful what i'm actually using below.

expect(yourElm).toHaveClass('ts-btn-blue');

Here a Jasmine 1.3.x custom toHaveClass matcher with negation .not support plus wait up to 5 seconds (or whatever you specify).

Find the full custom matcher to be added on your onPrepare block in this gist

Sample usage:

it('test the class finder custom matcher', function() {
    // These guys should pass OK given your user input
    // element starts with an ng-invalid class:
    expect($('#user_name')).toHaveClass('ng-invalid');
    expect($('#user_name')).not.toHaveClass('ZZZ');
    expect($('#user_name')).toNotHaveClass('ZZZ');
    expect($('#user_name')).not.toNotHaveClass('ng-invalid');
    // These guys should each fail:
    expect($('#user_name')).toHaveClass('ZZZ');
    expect($('#user_name')).not.toHaveClass('ng-invalid');
    expect($('#user_name')).toNotHaveClass('ng-invalid');
    expect($('#user_name')).not.toNotHaveClass('ZZZ');
});

UPDATE

This will only work on ElementFinders. Will work on WebElements once this jasminewd PR #9 gets merged.