Selenium IDE : Cannot click on a Vaadin button

Question

I am trying and automate the navigation to an external web site. For that purpose I need to click on a button (to show the following week in a fullcalendar calendar). Fullcalendar addon for Vaadin looks like this.

The button is defined in HTML as (Electron 80 developer tool) :

  <div id="content">
    <vaadin-vertical-layout class="layoutCalendar" theme="padding spacing" style="width: 80%;">
        <div class="buttonContainer">
            <vaadin-button class="custom-button" theme="icon" tabindex="0" role="button">
                <iron-icon icon="vaadin:angle-double-left"></iron-icon>
            </vaadin-button>
            <vaadin-button class="custom-button" tabindex="0" role="button">Today</vaadin-button>
            <vaadin-button class="custom-button" theme="icon" tabindex="0" role="button">
                <iron-icon icon="vaadin:angle-double-right"></iron-icon>
            </vaadin-button>
            <vaadin-button class="custom-button" theme="icon" tabindex="0" role="button">
                <iron-icon icon="vaadin:calendar"></iron-icon>
                <vaadin-date-picker tabindex="0" style="visibility: hidden; width: 0px; position: fixed; height: 0px;"></vaadin-date-picker>
            </vaadin-button>
        </div>
        <full-calendar class="calendar" style="background: rgb(255, 255, 255);"></full-calendar>
    </vaadin-vertical-layout>
</div>

Its xpath (from Firefox 68 dev tools) is defined as :

//*[@id="button"]

So I added a click command in Selenium IDE with the following text in the target field :

xpath=//*[@id="button"]

But of course as all buttons (namely the previous or today one) share the same id it does not work (Failed: 09:44:37 Implicit Wait timed out after 30000ms.

So I tried with the xpath of :

<vaadin-button class="custom-button" theme="icon" tabindex="0" role="button"><iron-icon icon="vaadin:angle-double-right"></iron-icon></vaadin-button>

xpath defined as :

/div[1]/vaadin-vertical-layout/div/vaadin-button[3]

So in Selenium IDE I entered in the target field :

xpath=//div/vaadin-vertical-layout/div/vaadin-button[3]

With the same result.

Furthermore using the Find target in page does not highlight the button and using Select target in page returns css=calendar-view and ends in the same way (does not click on the button).

Consequently how can I click on this button and why Selenium IDE doesn't show an error if it can't find the element ? Moreover should I switch Selenium (not the IDE) or is Selenium IDE sufficient for my needs ?

Please note : as it is an external website I don't own, I can't tell which vaadin version is powering the website.

Edit : trying @Pete's answer below

I exercized on Vaadin FullCalendar Addon demo and got it working with either xpath=//vaadin-button[4] or xpath=//vaadin-button//span[contains(text(),"Next")]. I noticed that Selenium IDE was suggesting those xpath while I was entering.

When I did the same on my target website Selenium IDE was only suggesting xpath=//calendar-view. Furthermore although the developer tools reported that the next button (which has no text, only the chevron-right icon) was actually the 4th vaadin-button, Selenium IDE was not able to highlight (aka find)xpath=//vaadin-button[4]. This looks weird to me.

What can prevent Selenium IDE to find the button ?

Any help greatly appreciated :-)

Peter Peter · Accepted Answer · 2020-04-23T10:10:52

From https://stefan.app.fi/fullcalendar-demo/, I wrote these xpaths:

Previous week:

XPath = "//vaadin-button//span[contains(text(),"Previous")]"

Next week:

XPath = "//vaadin-button//span[contains(text(),"Next")]"

Today:

XPath = "//vaadin-button//span[contains(text(),"Today")]"

Selenium IDE : Cannot click on a Vaadin button

1 Answers