Click on ng-if value from cypress

Question

I have a parameters tab and I want to click that tab.

Below is the HTML for same. Please help I am unable to click on the tab due to ngIf: activewizmenu != 'parameters'.

<div class="navigation-tab">
    <!-- ngIf: activewizmenu == 'parameters' -->
        <!-- ngIf: activewizmenu != 'parameters' -->
            <div ng-if="activewizmenu != 'parameters'" class="ng-scope">
                <!-- ngIf: hasCreatedTask() -->
                    <div ng-if="hasCreatedTask()" class="ng-scope" style="">
                        <a ui-sref=".parameters" href="#/game/wizard/G_1544166059776_U/edit">
                            <div class="tab">
                                <img src="images/gamification/panel_icons/icone_mw_gametab_0018_Oggetto-vettoriale-avanzato-copia-9.679f1df3.png" alt="parameters">
                                <div class="heading ng-binding">PARAMETERS</div>
                                <span class="color-purple ng-binding">Set parameters</span>
                            </div>
                        </a>
                    </div>
                <!-- end ngIf: hasCreatedTask() -->
            <!-- ngIf: !hasCreatedTask() -->
        </div>
    <!-- end ngIf: activewizmenu != 'parameters' -->
</div>

I need more information. Can you show us the cypress code? You are using angular JS it looks like. I am confused, is your element not showing in the DOM due to the condition. If your element is truly on the screen I should be able to help you. Is this condition activewizmenu != 'parameters' true when you run your test — Maccurt, Dec 07 '18 at 13:33

Richard Matsen · Answer 1 · 2018-12-07T21:01:30.387

In AngularJS ngIf will completely remove the element and it's children from the DOM when the expression is false, so using cy.get().click({force: true}) is likely to be insufficient.

In this DOM, <a ui-sref=".parameters" href="#/game/wizard/G_1544166059776_U/edit"> is the clickable element.

To select it you will need a selector which is specific to this tab, since there are other tabs on the page also with href and there are no distinguishing classes or ids. (AngualrJS adds class ng-scope to lots of elements).

See this page Attribute Contains Prefix Selector [name|=”value”] for syntax of selecting by an attribute and it's value.

I would try the following

cy.get("a[href|='#/game/wizard/G_1544166059776_U/edit']")
  .should('be.visible')
  .click()

This will wait 5 seconds for the clickable element to appear. If it doesn't do so, it will fail with a message like timeout out expecting a[href] to be visible.

If it does fail (for instance if activewizmenu != 'parameters' never becomes true), then you can still navigate to the target of the href as per this question Cypress get href attribute,

cy.visit('#/game/wizard/G_1544166059776_U/edit')

I am able to do it by changing the attribute value: cy.get('.navigation-tab > .ng-scope > a > .tab') .invoke('attr','ng-if','activewizmenu = parameters') cy.contains('PARAMETERS').should('not.be.visible') .click({force: true}) — Shriya Soni, Dec 12 '18 at 07:11

score 1 · Answer 2 · answered Dec 18 '18 at 10:08

1

By changing the attribute value. It worked.

cy.get ('.navigation-tab > .ng-scope > a > .tab')
.invoke('attr','ng-if','activewizmenu = parameters')
cy.contains ('PARAMETERS').should('not.be.visible')
.click({force: true})

answered Dec 18 '18 at 10:08

Shriya Soni

81
1
9

Diogo Rocha · Answer 3 · 2018-12-07T10:05:07.683

0

Use .click() with the option { force: true }.

This will force the click and all subsequent events to fire even if the element isn't considered 'actionable'.

Example:

cy.get(##your element identifier##).click({ force: true })

edited Dec 07 '18 at 10:05

answered Dec 07 '18 at 09:52

Diogo Rocha

9,759
4
48
52

If i am writing this then 5 elements will be found. I am getting error "CypressError: cy.click() can only be called on a single element. Your subject contained 5 elements. Pass { multiple: true } if you want to serially click each element." – Shriya Soni Dec 07 '18 at 10:02
I add `.navigation-tab` to my answer just as an example. You should pass the right element you want to click to the `get()` function. The important here is to add `{ force: true }` to the click handler. – Diogo Rocha Dec 07 '18 at 10:04
Yes,While trying that i am not getting error but still it is not clickable. – Shriya Soni Dec 07 '18 at 10:28
I am confused. Are you trying to click an element that should NOT be clicked in the current state of your app? – Maccurt Dec 07 '18 at 13:34

Click on ng-if value from cypress

3 Answers3