Using cypress how do I check that a background image has loaded? - cypress

Writing my first cypress test in conjunction with percy visual tester. I load my landing page, check a few links and then take a percy snapshot. The issue is that the background image hasn't loaded in the snapshot.
I can get it to appear by artifically waiting before taking the snapshot, but I'd prefer to have a cypress assertion to check this instead.
Here is the css:
.bg-hero {
#include image("/images/background/landing.jpg", center);
}
Here is the html:
<div class="bg-hero bg top-header bg-header-top" id="#"></div>
I tried: cy.get('.bg-hero').should('be.visible');
Am currently using: cy.wait(3000);
thanks

You can use Route command as this
cy.route('imageURL').as('image')
cy.wait('#image')
cy.get('.bg-hero').should('be.visible');

The issue was with Percy and not Cypress. I had to tweak a setting such that Percy would wait a while longer. Percy command line docs reference a network idle timeout setting. Thanks to Rob#Percy for putting me onto this. It has made my visual testing much more robust.

Related

Saved snapshot is only black square with plugin Cypress Image Snapshot

I tried to revive visual test in Cypress which run with help of plugin Cypress Image Snapshot.
In the past this test during first run save image with desired element (image).
desired_image
But now test save during first run only black square:
saved_black_image
This issue can be caused by upgrading the Cypress version (currently we use 9.5.1).
Does anyone had the same problem resp. can help me please?
Suggestions of good working free Cypress tools for visual testing are more than welcome.

Saving Cypress output to pdf file or similar

Is there a way to save the output shown in the linked video (on the left side) to a pdf file or similar? I have started experimenting with other Reporters offered, but the format of them does not seem to be as clear for reporting. Suggestions for Reporters that could do something similar as opposed to only XML would also be useful.
I haven't used this yet, but it's on my to-do list. It promises to do just that, store the command log output to a json file. It's written by Gleb, one of the cypress people, so it should integrate and work well with cypress.
https://github.com/bahmutov/cypress-failed-log
You may export a screenshot with both, the left sidebar and the application preview by using the screenshot function with capture: runner:
cy.visit(`http://www.fabiobiondi.dev`);
cy.viewport('iphone-6' )
cy.screenshot('imageName', { capture: 'runner'})
Result:
https://i.stack.imgur.com/rqN0E.png

Performance issue for ion-tabs

I have created a ionic tabs project using ion-tabs component. But the issue is when user clicks on tab icon, tab is not changed immediately. It takes 1-2 seconds to switch the tabs.
HTML Code:
<ion-tabs class="footer-tabs" selectedIndex="selectedTabIndex"#footerTabs>
<ion-tab tabIcon="list" tabTitle="'Notice'" [root]="noticepage"></ion-tab>
<ion-tab tabIcon="book1" tabTitle="'Homework'" [root]="homeworkpage"></ion-tab>
<ion-tab tabIcon="calendar1" tabTitle="'Event'" [root]="eventpage"></ion-tab>
<ion-tab tabIcon="list-box1" tabTitle="'Attendance'" [root]="attendancepage"></ion-tab>
</ion-tabs>
If I create new tabs project, then the component is working fine. But its giving issues in my project. I also tried by removing methods called on the ionPageDidEnter() for all the pages.
Does anyone know what could be the possible issue ?
I have debugged and tried to find possible issues. The issue was because of ion-list on pages , which was causing delay in tab switch. When I reduced ion-items to 30, performance increased. I implemented infinite scroll to avoid the performance issue.
thats is mostly dependant on how you load your pages and how you compile your project
try to lazy load you pages and compile your apk with ionic cordova run android --aot --minifyjs --minifycss this helps in making you app run much faster.

A minimal Nightwatch test doesn't work with Firefox 57

Here is a reproduction repo:
https://github.com/anatoliyarkhipov/nightwatch-firefox
It's a clear installation of nightwatch and webdriver-manager. The test opens http://example.com, clicks on the link and checks some content on the next page.
The problem is that if I run it in Firefox, it fails on the first step where we check that <body> is visible. If we change firefox to chrome in nightwatch.conf.js, then the test will pass.
I run it on Windows 10, Firefox 57.0 (64-bit).
What am I doing wrong?
You are missing path to the driver files in your config files
https://github.com/IvanNaumenko/test-project-nightwatch-cucumber
Hey!
This is nightwatch with cucumber. Download and write tests like in example here. You won't regret
Make sure you have the right version of geckodriver. Get the latest here: https://github.com/mozilla/geckodriver/releases

DOJO include script from CDN

Currently I'm trying to include Dojo from either one of these two CDN (Content Delivery Network) sources:
1) o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js
2) ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js
It seems like some times during the day, Firefox 3.5 refuses to load the dojo library.
I see errors in Firebug console like "dojo is not defined" when I do a "dojo.require" statement. Also from Firebug and go to the "Net" tab, and see no history of any attempt to load from the above dojo libs.
Yet, I can open the same page in IE7 and it works. I have flushed cache in FireFox, and killed and re-opened it (but I was using the restore previous pages option).
One time today, when I switched from AOL 1.3.2 to 1.1 it worked once, then never has worked again.
Thanks,
Neal
Sounds like timing issues. Are you sure you do CDN right? The trick is you cannot use what's defined in files you dojo.require()d right away — they are going to be loaded asynchronously.
The basic structure of the CDN-based application is like this:
<script src="to/dojo/cdn"></script>
<script>
dojo.require("dojo.this");
dojo.require("dojo.that");
// more dojo.require()
// you cannot use dojo.this and dojo.that here
dojo.addOnLoad(function(){
// this is crucial: do everything in dojo.addOnLoad();
// now use dojo.this and dojo.that
dojo.this(dojo.that);
});
</script>
In order to troubleshoot you can do one thing: write a minimal web page, which loads Dojo using your favorite CDN and does nothing. Open it up in Firefox, open Firebug and enter some simple Dojo calls manually to see if it works for you. If it doesn't, switch to the Net tab and see what calls were made, when, and how they ended.

Resources