XRM-OSS / D365-UI-Test-Jest-Demo

Demo repository for a D365-UI-Test project using Jest
MIT License
4 stars 4 forks source link

Click Ribbon #4

Closed imartinflores closed 3 years ago

imartinflores commented 3 years ago

Hi , any example where you are clicking a ribbon button under more commands ? I ve tried using label and data-id, but is not even expanding more commands.

Thanks!

DigitalFlow commented 3 years ago

Hi @imartinflores,

that should usually be done automatically. There is a logic when clicking a button, which searches for it and if it does not find it, clicks the more commands button automatically and retries searching your button. There is also a specific function for expanding the more commands section on your own.

I just tried at one of my organizations, where the "Assign" ("Zuweisen" in German) button is in the more commands section using this code:

await xrmTest.Navigation.openUpdateForm("contact", "deadbeef-cb20-ea11-a810-000d3a2bc66a");
await xrmTest.Button.click({ byLabel: "Zuweisen" });

Worked for me, more commands was clicked and then the button. Can you give me a code example of what you're trying to do?

Kind Regards, Florian

imartinflores commented 3 years ago

Hi @DigitalFlow ! Thanks for your answer. Sure, here is what I am trying to do:

await xrmTest.Navigation.openUpdateForm("contact", contactid); await xrmTest.Button.click({byDataId: "contact|NoRelationship|Form|win.contact.Button22.Button"}, true)

also tried:

await xrmTest.Button.click({byLabel: "General"}, true)

but both returns: Failed to find button

Thank you!

DigitalFlow commented 3 years ago

Hi @imartinflores,

Is it a simple button, or some special one such as a combo button? Which version of D365-UI-Test and CRM are you using?

Kind Regards, Florian

imartinflores commented 3 years ago

Hi @DigitalFlow ! Its a simple ribbon button, inside of more commands, its to create incidents. I know we have the option to openCreateForm() but this is because we had an issue with ribbon not being clickable, so I would like to check. I am using latest version, just updated it this morning to make sure. And Microsoft Dynamics 365 Online Version 9.1 (9.1.x) (DB 9.1.x) online.

I have tried with another ribbon button, which does not have "More commands" and it works

Thanks!

DigitalFlow commented 3 years ago

Hi @imartinflores,

First up: Does the "More Commands" menu even open at your side?

If yes, can you manage to show me the HTML of the button that you are trying to click? It's a little annoying to get it, you will probably have to add a DOM breakpoint inside the browser debugger, as the more commands overlay will disappear once you click anywhere else (including the debugger).

If No, can you please show me the HTML of your "More Commands" Button? It should look something like this:

<li id="OverflowButton_button24" role="presentation" title="Weitere Befehle für Kontakt" data-expanded="false" class="pa-ka pa-fp pa-z pa-tt pa-tu pa-tv pa-tw pa-tx ">
    <button id="OverflowButton_button24$button" aria-label="Weitere Befehle für Kontakt" aria-describedby=" openflyout_description_OverflowButton_button24" aria-expanded="false" aria-haspopup="true" role="menuitem" tabindex="0" data-id="OverflowButton" data-lp-id="Form:contact-OverflowButton" type="button" class="pa-ak pa-ka pa-fp pa-fu pa-da pa-aj pa-at pa-pj flexbox">
        <span aria-hidden="true" class="pa-az pa-ah pa-a pa-gp ">
            <span class="pa-ck pa-cj pa-bd pa-a pa-at ">
                <span class="symbolFont MoreVertical-symbol pa-pe pa-cg pa-bd pa-cc pa-aw "/>
            </span>
            <span class="pa-gr pa-bd pa-ua pa-v pa-e pa-cm pa-px pa-cl "/>
        </span>
    </button>
    <span id="openflyout_description_OverflowButton_button24" class="pa-w ">Zum Öffnen des Flyouts die Eingabetaste drücken</span>
</li>

Kind Regards, Florian

imartinflores commented 3 years ago

Hey @DigitalFlow !

From what I could see, is not even opening the more commands. Sure, here you have the more commands: image

And the button I am trying to click: image

Let me know if that helps. Thanks!

DigitalFlow commented 3 years ago

Hi @imartinflores,

could you copy the HTML in here? It seems that there is quite some stuff missing. You can just right click on the nodes and click "Edit as HTML", then you can copy it. It also looks as if it was not the Overflow Button that you copied. It must be that one button with the three dots.

It seems however that your button is not a normal button, but a SplitButton. Might be that there is something special in how the HTML is generated for these.

Kind Regards, Florian

imartinflores commented 3 years ago

Sure @DigitalFlow :

This is the more commands HTML:

<li id="contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2" role="presentation" title="New Case Creates a new case for this player" data-expanded="true" class="pa-oe pa-y pa-nx pa-nz "><button id="contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2$button" aria-label="New Case More Commands" aria-describedby="flyoutButton_description_contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2 openflyout_description_contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2" aria-expanded="true" aria-haspopup="true" role="menuitem" tabindex="0" data-id="contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId" data-lp-id="Form:contact-contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId" type="button" class="pa-ak pa-jg pa-fs pa-fx pa-aj pa-ld pa-at pa-cn pa-bp flexbox" aria-owns="contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2_flyout" style="outline-color: rgb(102, 102, 102);"><span aria-hidden="true" class="pa-az pa-ah pa-a pa-gs "><span class="pa-jg pa-cd pa-fj pa-fm pa-of pa-oa pa-ob pa-jh "><span class="symbolFont ChevronDown-symbol pa-oc pa-cg pa-bd pa-cc "></span></span><span class="pa-gu pa-bd pa-oc pa-v pa-e pa-cm pa-od pa-cl "></span></span></button><span id="flyoutButton_description_contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2" class="pa-w ">Creates a new case for this player</span><span id="openflyout_description_contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId_button2" class="pa-w ">Press Enter to open flyout</span></li>

And this is the one trying to click:

<li id="contact|NoRelationship|Form|win.contact.AddNewCase.Command.General02" role="presentation" title="General" class="pa-bh "><button id="contact|NoRelationship|Form|win.contact.AddNewCase.Command.General02-button" aria-label="General" role="menuitem" tabindex="0" data-id="contact|NoRelationship|Form|win.contact.Button22.Button" data-lp-id="Form:contact-contact|NoRelationship|Form|win.contact.Button22.Button" type="button" class="pa-oc pa-bh pa-ak pa-fx pa-aj pa-oa pa-ob pa-jd pa-je pa-ah pa-at pa-ld flexbox" style="outline-color: rgb(102, 102, 102);"><span aria-hidden="true" class="pa-az pa-at pa-ah pa-a pa-gs "><span class="pa-jg pa-gy pa-cd pa-bd pa-a pa-at "><img src="/%7b637521788010000152%7d/webresources/win_ico_case_16x16svg" alt="" class="pa-kw pa-cg pa-bd pa-cc pa-og "></span><span class="pa-gu pa-bd pa-oc pa-cl pa-v pa-e pa-cm pa-po ">General</span></span></button></li>

Hope it helps more now, again, let me know if you need more help from me.

Thanks a lot

DigitalFlow commented 3 years ago

Hi @imartinflores,

I think there is something wrong with your overflow / "More Commands" button. It should look totally different. The important part is the data-id="OverflowButton" property on its button HTML element:

    <button id="OverflowButton_button24$button" aria-label="Weitere Befehle für Kontakt" aria-describedby=" openflyout_description_OverflowButton_button24" aria-expanded="false" aria-haspopup="true" role="menuitem" tabindex="0" data-id="OverflowButton" data-lp-id="Form:contact-OverflowButton" type="button" class="pa-ak pa-ka pa-fp pa-fu pa-da pa-aj pa-at pa-pj flexbox">

Can you post a screenshot of what the button that you see as overflow button looks like? Should look something like this: image

From the code that you sent, it seems to me that you are not dealing with an overflow button, but instead with a split button. In that case you would first have to click the split button and then your actual button.

Can you try this?

await xrmTest.Button.click({ byDataId: "contact|NoRelationship|Form|win.contact.AddNewCase.SplitButton.Menu$splitButtonId" });
await xrmTest.Button.click({ byLabel: "General" });

Kind Regards, Florian

imartinflores commented 3 years ago

Sure @DigitalFlow , it does not look like that definitely. Attached you have a screenshot. That way is clicking the "More Commands" and I need to wait for the "General" button to appear in the flyout before clicking it then. That will help.

image

Thank you!

DigitalFlow commented 3 years ago

Hi @imartinflores,

I see, so this is really a split button, not the overflow button.

Did you try my approach? The code that I sent should first expand your split button, wait for the UI to become idle and then click the General button inside the expanded Panel. Should do the trick.

Kind Regards, Florian

imartinflores commented 3 years ago

Hi @DigitalFlow , yeah, tried that, but seems like I need to add a Wait between clicks (More Commands and General) cause without it, it clicks the More Commands, but then fails cause the General button is not displayed immediately, so I will try to add a wait between. Thanks so much for looking into it, appreciate it!

DigitalFlow commented 3 years ago

Hi @imartinflores,

That's strange, usually it should wait at least 2 seconds on its own after clicking the first button. But ok, adding a wait for the second button should be the way to go then.

Glad to have helped and glad that you're using this framework :).

Please close this issue once you got it working.

Kind Regards, Florian