CODEWITHSUNDEEP
serenity-js
Ali
Ali

Reputation: 3081

How to use serenity js Attribute to assert if the element is disabled

I have the following DOM on the page 

<button type="submit" ng-reflect-disabled="true" disabled="">
    Save &amp Exit
</button>

Also i have a (screen-play) component to target it's attribute

import {Attribute, Target} from "serenity-js/lib/serenity-protractor";
import {by} from "protractor";

export class myComponent {

    public static saveAndExit = Target.the('"Save & Exit" submit button')
        .located(by.buttonText("Save & Exit"));

    public static saveAndExitAttribute = Attribute.of(CreateClientComponent.saveAndExit);
}

All I want to do is to make sure that DOM has the disabled attribute flagged, but my following attempt in a step_definitain file is getting nowhere 

this.Then(
    /^he should see "Save & Exit" button still is disabled$/,
    function(buttonText) {

        return expect(
            this.stage.theActorInTheSpotlight().toSee(CreateClientComponent.saveAndExitAttribute),
        ).to.equal("");
    });

Basiccaly i dont have enough undrestaing of how to target any attribute, using the attribute's question

Also I didnt mange to find any use-case of it, any advice, hint would be really appreciated

Upvotes: 1

Views: 1812

Answers (2)

Priess
Priess

Reputation: 1

For the records - and some people that might be interrested in my solution to select multiple items of a -Tag:

    public void selectResultTypesInSearchForm(List<ResultType> resultTypes) {
    Actions actions = new Actions(getDriver());
    int numButtonsClicked = 0;
    for (ResultType resultType : resultTypes) {
        String lowerCase = resultType.name().toLowerCase();
        if (numButtonsClicked == 1) {
            actions.keyDown(Keys.LEFT_CONTROL);
        }
        actions.click(getMultiSelectWebElement().findElement(By.xpath("./option[text()='%s']".formatted(lowerCase))));
        numButtonsClicked++;
    }
    actions
            .keyUp(Keys.LEFT_CONTROL)
            .build()
            .perform();
}

Upvotes: 0

Jan Molak
Jan Molak

Reputation: 4536

You're on the right track! You just need to tell Serenity/JS which attribute you're interested in.

The syntax of the Attribute question is Attribute.of(target).called('attribute name'), as per the unit tests here.

So instead of saying:

import {Attribute, Target} from "serenity-js/lib/serenity-protractor";
import {by} from "protractor";

export class myComponent {

    public static saveAndExit = Target.the('"Save & Exit" submit button')
        .located(by.buttonText("Save & Exit"));

    public static saveAndExitAttribute = Attribute.of(CreateClientComponent.saveAndExit);
}

try this:

export class myComponent {

    public static saveAndExit = Target.the('"Save & Exit" submit button')
        .located(by.buttonText("Save & Exit"));
}

and then in your assertion:

return expect(       
   actor.toSee(
      Attribute.of(CreateClientComponent.saveAndExit).called('disabled')
   )
).to.eventually.equal('');

Or even better, using the task to See:

return actor.attemptsTo(
  See.if(Attribute.of(CreateClientComponent.saveAndExit).called('disabled'), value => expect(value).to.eventually.equal('')
)

Which you can then extract into another task:

const CheckIfTheButtonIsDisabled = (button: Target) => Task.where(`#actor checks if the ${button} is disabled`,
      See.if(Attribute.of(button).called('disabled'), value => expect(value).to.eventually.equal('')
);

Which will simplify your assertion to:

return actor.attemptsTo(
  CheckIfTheButtonIsDisabled(CreateClientComponent.saveAndExit),
)

Hope this helps!

Jan

Upvotes: 2

Related Questions