For some reason Cypress is not taking a screenshot after the new page loads after clicking on menu item inside of dropdown menu.
it.only('2.4 - Press "My Settings" on the top right corner - "My Settings" screen is displayed.', () => {
cy.login()
cy.get('body div button[data-cy=usermenubutton]')
.click()
.get('body div ul li[data-my=mySettings]')
.contains('My Settings')
.click()
.screenshot()
})
It runs correctly, I can see it click on My Settings and that new page loads up, but it has already taken the screenshot by then. What is happening here? Keep in mind I am brand new to Cypress.
I tried doing the following:
it.only('2.4 - Press "My Settings" on the top right corner - "My Settings" screen is displayed.', () => {
cy.login()
cy.get('body div button[data-cy=usermenubutton]')
.click()
.get('body div ul li[data-my=mySettings]')
.contains('My Settings')
.click()
cy.get('[data-cy=headerTitle]')
.should('be.visible')
.screenshot()
})
When I do it this way I get an error:
expected '<vid.sc-gsDKAQ.eaXakP.MuiBox-root>' to be 'visible'
This element <vid.sc-gsDKAQ.eaXakP.MuiBox-root> is not visible because it has CSS property: position: fixed and it's being covered by another element:
When I try doing it this way:
cy.get('[data-cy=headerTitle]')
.should('be.visible')
.screenshot()
I get a poor screenshot, it's just the area of the new page and not the whole page, no heard, no sidebar and so on.
You should wait for the page you want to take a screenshot of to load. To do so, add a assertion to check if the "My Settings" screen has properly loaded before you call screenshot(). I usually check for an element that should only be visible in the target page to actually be visible before firing my screenshot:
it.only('2.4 - Press "My Settings" on the top right corner - "My Settings" screen is displayed.', () => {
cy.login()
cy.get('body div button[data-cy=usermenubutton]')
.click()
.get('body div ul li[data-my=mySettings]')
.contains('My Settings')
.click()
cy.get('selector_of_an_element_only_visible_in_My_Settings')
.should('be.visible')
.screenshot()
})
As stated in the docs here, should(), like other cy commands, will continue to retry its assertion until it passes or until it times out.
If you're confident on the element you're asserting on and the screenshot still happens too fast, you should consider using cy.wait() and pause the test for 1 second.
cy.get('[data-cy=headerTitle]')
.should('be.visible')
.wait(1000)
.screenshot()
Related
I just started playing with cypress and I am trying to write down some tests in my sandbox application. In my first test user should click on a 'button' to make the toolbar to appear, then click on a button to activate the feature, then click a couple of times on a leaflet map to draw a line.
As you can see: click on 'Tools', then click on 'draw route' button and then click on map to draw.
This dummy app is wrapped inside a web component, here is the code:
And here is my test code:
describe('Draw geometries on map', ()=>{
beforeEach(() => {
cy.visit('http://192.168.49.2:30000/scouter/');
})
...
it('can draw after clicking draw button', ()=>{
cy.get('scouter-web').shadow().find('.scouter-tools-main-button').click()
cy.get('scouter-web').shadow().find('draw route').click()
console.log('new cy')
cy.get('scouter-web').shadow().get('scouter-web').shadow().find('#map')
.click(400, 400)
.click(400, 600)
.click(500, 600)
})
});
Problem is I, after clicking 'Tools', I can't 'find' the 'draw route' button. What am I missing? The whole stuff can be found here, subproject is scouter-web.
Instead of using the shadow() repeatedly, you can mention includeShadowDom: true once in your cypress.json file.
With find you can just use selector but I think you are using text. If you just want to use text, you can use contains.
cy.contains('draw route').click()
And if your application is throwing Uncaught Exceptions you can add to your cypress/support/index.js to globally turn off all uncaught exception handling. But a fair bit of warning, do this only when you are sure that the exceptions generated can be ignored.
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false
})
So I am trying to run a Cypress test where the user goes to a dropdown at the top right and clicks on My Settings and then clicks on a link called Privacy Policy:
it.only('2.5 - Press "Privacy Policy" on the "My Settings" screen. - "Armadillo Privacy Policy" screen is displayed', () => {
cy.login()
cy.get('body div button[data-cy=usermenubutton]')
.click()
.get('body div ul li[data-cy=mySettings]')
.contains('My Settings')
.click()
cy.get('a[href="/legal/privacy"]')
.click()
cy.screenshot()
})
However, no matter how I refactor this, I continue to get this error:
cy.click() failed because this element:
<a class='MuiTypography-root-bwkfm MuiTypography-root MuiTypography-inherit MuiTypography-root-dfghjk MuiLink-root MuiLink-underlineAlways" href="/legal/privacy">Privacy...</a>
is being covered by another element:
<div aria-hidden="true" class="MuiBackdrop-root-fghjkl hjk MuiBackdrop-root MuiBackdrop-invisible MuiModal-backdrop-klghjkhg tyutyu style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div>
Fix this problem, or use {force: true} to disable error checking.
Since your element is covered by another element, you can use click({force: true}), to disable the error checking and perform the click.
cy.get('a[href="/legal/privacy"]').click({force: true})
I can´t click on button:
// tslint:disable-next-line:no-shadowed-variable
elementToClick.isEnabled().then(function(isEnabled) {
if (isEnabled) {
console.log('button enabled');
browser.
wait(protractor.ExpectedConditions.elementToBeClickable(elementToClick), 50000)
.then(function() {
elementToClick.click();
});
}
});
Click fails due:
Failed: Element is not clickable at point (1781.908317565918,887) because another element obscures it
Do you know why?
The class modal fade show d-block is on top of button div.
hi everyone here is my test page so you can see what help that i need,
http://jjvirgin.24techstuddev.com/testpage/
i want to continues slide left or right when hover, cause at the moment its only sliding left or right once. i want to make it continue sliding to left when you hover on the left button, or continue sliding to the right when you hover to the right button.
here is the code that i used to make it slide once.
<script>
jQuery(document).ready(function() {
jQuery('.slick-prev').mouseover(function() {
jQuery('.swiper-wrapper').slick('slickPrev')
});
jQuery('.slick-next').mouseover(function() {
jQuery('.swiper-wrapper').slick('slickNext')
});
});
</script>
Instead ou using 'slickPrev' and 'slickNext' methods use slickPlay on mouseover() and slickPause on mouseout()
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.