Unable to click on the "stage1".
CypressError: Timed out retrying: cy.click() failed because this element:
<img class="add-achievement" src="images/gamification/add-entry-icon.e4f22ffd.png"
alt="add stage achievement" ng-click="addStage(achievement.stage)" role="button"
tabindex="0">
is being covered by another element:
<md-backdrop class="md-select-backdrop md-click-catcher ng-scope" style="position: fixed;">
</md-backdrop>
Fix this problem, or use {force: true} to disable error checking.
https://on.cypress.io/element-cannot-be-interacted-with
Code:
cy.get('#stage').click({force: true})
cy.get('#select_container_218 > md-select-menu > md-content')
.invoke('show')
.should('not.be.visible')
cy.contains('stage1')
.invoke('show')
.click({force: true})
Related
1. Initial post
I know that Playwright has auto-waiting.
I have a test where sometimes click works, sometimes does not. Below is the code.
import { test, expect } from '#playwright/test';
test('test', async ({ page }) => {
await page.goto('https://website.com');
await page.getByRole('link', { name: 'Log in' }).click();
await expect(page).toHaveURL('https://website.com/login/');
});
Error:
expect(received).toHaveURL(expected)
Expected string: "https://website.com/login/"
Received string: "https://website.com"
Here is a piece of HTML with a login button
<span data-v-154d6ddf="" class="absolute-top-right">
<div class="row justify-end q-gutter-x-sm q-pt-lg q-px-sm">
<div class="col-auto">
<a tabindex="0" type="button" href="/login/potential" role="link" class="q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--rectangle text-white q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--wrap">
<span class="q-focus-helper" tabindex="-1"></span>
<span class="q-btn__wrapper col row q-anchor--skip">
<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<span>Log in</span>
</span>
</span>
</a>
</div>
<div class="col-auto">
<a tabindex="0" type="button" href="/signup" role="link" class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--wrap">
<span class="q-focus-helper"></span>
<span class="q-btn__wrapper col row q-anchor--skip">
<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<span>Sign up</span>
</span>
</span>
</a>
</div>
<div class="col-auto">
<label for="f_2334a082-8df9-41a7-9ca0-403e5ce7c237" class="q-field q-validation-component row no-wrap items-start q-select q-field--auto-height q-select--without-input q-select--without-chips q-field--outlined q-field--float q-field--labeled" style="min-width:120px;max-height:20px">
<div class="q-field__inner relative-position col self-stretch column justify-center">
<div tabindex="-1" class="q-field__control relative-position row no-wrap">
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
<div id="translate" class="q-field__native row items-center">
<span>English</span>
<div id="f_2334a082-8df9-41a7-9ca0-403e5ce7c237" tabindex="0" class="no-outline"></div>
</div>
<div class="q-field__label no-pointer-events absolute ellipsis">Translate</div>
</div>
<div class="q-field__append q-field__marginal row no-wrap items-center q-anchor--skip">
<i aria-hidden="true" role="presentation" class="q-select__dropdown-icon fal fa-caret-down q-icon notranslate"></i>
</div>
</div>
</div>
</label>
</div>
</div>
</span>
2. Update
I tried this variation (see below), and it seems like it fails less frequently, but still does not work 100%.
I also tried .click({force: true}). Fails on 3rd run.
I am new to test automation. Just started learning Playwright.
I will appreciate any comments/suggestions.
thank you.
import { test, expect } from '#playwright/test';
test('test', async ({ page }) => {
await page.goto('https://website.com');
const loginBtn = page.getByRole('link', { name: 'Log in' });
expect(await loginBtn.evaluate(node => node.isConnected)).toBe(true) ;
await page.getByRole('link', { name: 'Log in' }).click();
await expect(page).toHaveURL('https://website.com/login/');
});
3. Update
"You should wait after clicking the button before verifying the url." This ws suggestion from #jaky-ruby
I tried this code
test('test2', async ({ page }) => {
await page.goto('https://website.com/');
// Note that Promise.all prevents a race condition
// between clicking and expecting navigation result.
const [response] = await Promise.all([
page.getByRole('link', { name: 'Log in' }).click(),
page.waitForNavigation({ url: 'https://website.com/login' }),
]);
await expect(page).toHaveURL('https://website/login');
...
});
4. Update
I created similar test in Cypress.
Here is the code
describe("Login", () => {
beforeEach(() => {
cy.visit(baseUrl);
});
it.only("Login page should open", () => {
//does not help: cy.wait(3000);
cy.get('a[href*="login"]').click();
//does not help: cy.get(':nth-child(1) > .q-btn > .q-btn__wrapper > .q-btn__content > span').click();
//does not help: cy.get('#q-app > div > span > div > div:nth-child(1) > a > span.q-btn__wrapper.col.row.q-anchor--skip > span').click();
cy.url().should("eq", authUrl.replace("env", env) + "/login/potential");
});
});
As you can see i tried different variations of locators. The interesting part is that Cypress showed this error. Not sure this is the same problem that occurs in Playwright test.
CypressError
Timed out retrying after 4050ms: cy.click() failed because this element: ...is being covered by another element:
I tried to find that element in the DOM but it is not there.
5. Update
Another thing that I do not understand is that when I select "click" step in Cypress and use picker to select my button it shows me selector cy.get('[data-layer="Content"]'). Again, when I try to search it in the DOM it is not there.
6. Update
I checked each step in Playwright using Trace Viewer.
Interesting. The log shows that Playwright waited for element to be visible and stable. However, on the attached page both Login and Sign up buttons are not visible and still loading (turns out you can inspect it. It's not just a static screenshot). I think, possibly, Playwright's auto-wait is not good enough in this example. Possibly, element is not actually stable and still loading but Playwright performs click which does not work.
Now question, "can I do some additional wait to unsure that element has loaded and stable? "
Okay, looks like I found ~~solution~~ a way to make my test less flaky.
Test still fails sometimes. I think, additional 2 waits which I added just give more time for element to load, so in most cases, probably, that is enough for button to reach stable state. That's why clicking works. Note, on the screenshot below that 'networkidle' is 1.4s
Here is the final code
import { test, expect } from '#playwright/test';
test('test', async ({ page }) => {
await page.goto('https://website.com');
await page.waitForLoadState('networkidle'); // <- until there are no network connections for at least 500 ms.
await page.getByRole('link', { name: 'Log in' }).waitFor(); // <- wait for element
await page.getByRole('link', { name: 'Log in' }).click();
await expect(page).toHaveURL('https://website.com/login/');
});
Sharing here some interesting links I found along the way
Avoiding hard waits in Playwright and Puppeteer - DEV Community 👩💻👨💻
waitForLoadState waitUntil domcontentloaded doesn't wait · Issue #662 · microsoft/playwright · GitHub
i am trying to click on the icon trash
<div class="form-body">
<div class="infos">
<div class="recap">
<div class="form-actions ">
<a class="btn btn-light btn-icon btn-icon-light" title="download" href=""
target="_blank" rel="noreferrer noopener" download="my_file">
<i class="icon-download"></i>
</a>
<button type="button" class="btn btn-light btn-icon btn-icon-light" title="delete">
<i class="icon-trash">
i have tried
cy.get('i.icon-trash').click()
cy.get(.form-actions .icon-trash').click()
Whatever i am trying i am getting the error:
The element <i.icon-trash> is not visible because its ancestor has position: fixed CSS property and it is overflowed by other elements. How about scrolling to the element with cy.scrollIntoView()?
Fix this problem, or use {force: true} to disable error checking.
scrollIntoView() also is not working.
Does anyone know why this error is happening please?
Thank you
screenshot of the html part above
The button parent of the icon has the click handler, try clicking that
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible') // for good measure, may not require
.click()
but I suspect the problem still persists.
Also try realClick()
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible')
.realClick({ position: "topLeft" }) // try various click positions
You can also try setting a larger viewport at the top of the test.
Other than that try working the CSS - but this is a bit of a hack.
Arguably it's ok because you are testing the click logic not the visibility of the icon (also true for .click({force:true})).
Identify the element with position: fixed for example if it's div.form-actions
cy.get('div.form-actions')
.then($formActions => {
$formActions.css({ position: 'relative' })
})
On the website that i am testing , i have a link -clicking to which brings out a popup.
I am able to locate the link , however clicking on the link results in an "uncaught exception TypeError: Cannot read property popup...". if i suppress the exception the test passes but i still can't see the popup.
I have tried putting waits but it didn't work. So thought of checking here if someone faced a similar issue?
The link element that brings up the popup is below
<a class="locpickerSelect" data-blank="<span>Select Location</span>" data-change="<span>Change Selection</span>" href="#"><span>Select Location</span></a>
The popup adds an additional div in the source code , below is what i see in source code when i click on the link
<div class="PopupOverlay" style="inset: 0px; position: fixed;"></div>
<div class="PopupShadow" style="width: 940px; height: 352px; top: 5px; left: 216px;"></div>
<div class="PopupFrame" style="width: 940px; height: 352px; left: 216px; top: 5px;">
<a class="ClosePopup icon cancel-circle"></a>
<iframe seamless="seamless" frameborder="0" width="100%" height="100%" src="https://<myurl>;forFeature=&selectOrgId=" style="display: block; height: 352px;"></iframe>
</div>
The "uncaught exception TypeError: Cannot read property popup..." probably is coming from the application, not the test.
You can put this at the top of the test,
Cypress.on('uncaught:exception', (err, runnable) => {
return false
})
This will suppress any exception from the app, but ideally you want to look at why it occurs.
There does not seem to be anything in the HTML you show that might cause it. Most likely it is in the click handler of locpickerSelect.
I want to click on the element
cy.visit('https://test.com:1111/')
cy.get('button').click()
cy.contains('Configuration').click()
cy.get('ant-tabs-tab').contains('Blocks').click()
but this element is overlapped by another element with CypressError:
Timed out retrying: cy.click() failed because this element:
<div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab"> Blocks </div>
is being covered by another element:
<ul class="ant-menu menu ant-menu-dark ant-menu-root ant-menu-horizontal" role="menu" style="line-height: 64px;">...</ul>
Fix this problem, or use {force: true} to disable error checking.
You can use {force: true} with click() to disable error checks:
cy.visit('https://test.com:1111/')
cy.get('button').click({force: true})
cy.contains('Configuration').click({force: true})
cy.get('ant-tabs-tab').contains('Blocks').click({force: true})
I'm trying to upgrade my project to use Razor.
I have used the Telerik conversion tool https://github.com/telerik/razor-converter
to convert my views to Razor but I am getting errors related to the Telerik Window control.
Here is an example of the markup for the window control:
#Html.Telerik().Window()
.Name("ClientWindow")
.Content(#<text>
<div id="Div1">
<div class="bgTop">
<label for="drpFilter">
Filter:</label>
#Html.DropDownListFor(x => x.ClientLookupViewModel.SelectedFilter, Model.ClientLookupViewModel.FilterBy, new { id = "drpClientFilter" })
<label>
By:</label>
#Html.TextBoxFor(x => x.ClientLookupViewModel.FilterValue, new { id = "filterValue" })
<button type="button" value=" " class="t-icon t-refresh refreshButton" title="Refresh Client & Matter"
onclick="refreshClientClicked()">
</button>
#Html.ValidationMessageFor(x => x.ClientLookupViewModel.FilterValue)
</div>
<iframe id="frameClientLookup" src="#Url.Action("ClientIndex","Lookup")" style="border: 0px;
height: 404px; width: 100%; margin: 0px; padding: 0px;"></iframe>
<div class="bgBottom">
<input style="float: right; margin-top: 5px" type="button" value="OK" id="Button1" onclick="btnClientOkayClicked()" /></div>
</div>
</text>)
.Modal(true)
.Width(800)
.Height(473)
.Title("Client Lookup")
.Buttons(buttons => buttons.Refresh().Maximize().Close())
.Visible(false)
.HtmlAttributes(new { id = "ClientWindow" })
.Render();
This gives the following error
Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
Parser Error Message: "<" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.
Source Error:
Line 41: #Html.Telerik().Window()
Line 42: .Name("ClientWindow")
Line 43: .Content(#<text>
Line 44:
Line 45: <div id="Div1">
-----------------------
Does anyone know what the problem is here ?
Thanks
You should change your code like this:
OLD:
#Html.Telerik().Window()
/* rest is omitted for brevity */
.Render();
NEW:
# {
Html.Telerik().Window()
/* rest is omitted for brevity */
.Render();
}
Since you have whitespace and newlines in that code nugget, you need to wrap the whole thing in parentheses to force Razor to continue parsing it past the newline.