CODEWITHSUNDEEP
seleniumautomated-testsmocha.jswebdriver-io
tan js
tan js

Reputation: 294

Not able to click on a button, when isExisting is true; isDisplayedInViewport true, but waitForDisplayed timed out for the element in WebdriverIO

The script fails with this error. Error: element (".WONDERESC") still not displayed after 30000ms

Tried different combinations for Xpath, (relative, fixed, text()} and CSS selectors, but the button not clicked. The sign-in button div in the code block:

<div>
    <div class="WONDERBSC" role="form">
        <div>
            <div class="WONDERJ1B" data-automation-id="userName">
                <div class="TOM-Label WONDERP1B"
                    title="Username">Username</div>
                <input type="text"
                        class="TOM-TextBox WONDERM1B" aria-label="Username">
                    <button type="button" class="TOM-Button WONDERN1B"/>
            </div>
        </div>
            <div>
                <div class="WONDERJ1B"
                    data-automation-id="password">
                    <div class="TOM-Label WONDERP1B" title="Password">Password</div>
                    <input type="password" class="TOM-PasswordTextBox WONDERM1B" aria-label="Password">
                        <button type="button" class="TOM-Button WONDERN1B"/>
                </div>
            </div>
                <button type="button"
                        class="WONDERESC"
                        data-automation-id="goButton">Sign In</button>
    </div>      
</div>

Kindly suggest the workarounds - the other conditions are also meeting- visibility-true, display-block, opacity not zero.

Thanks, Tan

Upvotes: 0

Views: 806

Answers (2)

Mike G.
Mike G.

Reputation: 3950

As it was told in the comments, you are using invalid selectors.

Assuming you have the latest WebdriverIO v6, the following works like a charm

// open page
browser.url('https://impl.workday.com/wday/authgwy/accenture_dpt2/login.htmld?redirect=n')

const form = $('[data-automation-id="authPanel"] [role="form"]')
// make sure form is visible
expect(form).toBeVisible()

// define form data
const formData = [{
    id: 'userName', value: 'test'
}, {
    id: 'password', value: 'password'
}]

// fill form
formData.forEach(f => {
    form.$(`[data-automation-id="${f.id}"] input`).setValue(f.value)
})

// submit form
form.$('button[data-automation-id="goButton"]').click()

// make sure error message exist
const errorMessage = $('[data-automation-id="alertMessage"]')
expect(errorMessage).toBeVisible()
expect(errorMessage).toHaveTextContaining('Invalid user name or password')

Upvotes: 0

Rahul
Rahul

Reputation: 31

If element is not displayed then you have to make it visible

Case 1 The element takes some time to be visible automatically In this case, you can use webdriver wait WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(10)); wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("xxxx"));

Case 2 Element is visible after some interaction like mouse movement or click or type Then you have to perform that action with selenium. For mouse movements you can use action classes

Upvotes: 0

Related Questions