Saved snapshot is only black square with plugin Cypress Image Snapshot - cypress

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.

Related

Image alignment issues in Wocommerce

we are working on flatsome. the image alignment is not proper. Whenever I deactivate wp-rocket plugin, images fixes itself up.
I am not able to understand what is the causing this issue.
Are you getting any errors in the console? Also, are you using the "Delay JavaScript Execution" feature in the wp-rocket plugin? If yes, then check the wp-rocket article
https://docs.wp-rocket.me/article/1560-delay-javascript-execution-compatibility-exclusions#plugins, It may help you to resolve this issue.

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

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.

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

Running tessaract on iOS 7

I'm working on a project where i have to take an image and convert the textual context into sound.At first stage i have to convert those image into text(english).I'm using tessaract API's for converting that image into text(en).I have been trying to follow up tessaract
tutorials for completing the steps.But it is my unfortunate that i haven't found any tutorils which give me the image to text conversion without any error.
Last time i got a template from online.But it is not working and also not showing any error.
https://github.com/gali8/Tesseract-OCR-iOS
If anyone please check the link and please tell me why it is not running on iOS device or simulator.I have been using Xcode 5.1.I also want a better reference or suggestion regarding my problem.Thanks!

slow scrolling when using responsive bootstrap theme

I am using a bootstrap 3 template and have noticed on some that scrolling is not smooth and kind of bumpy. I am not even sure what to look for. This only happens in Chrome. It does NOT happen in Safari or Firefox.
Is this a javascript or css problem? I have never run across this before.
This seems to happen worse in Chrome for mac, but also happens in chrome for windows.
It seems to happen when I make the window smaller and then make it bigger again. If I leave the window the same size, it seems to scroll fine.
Link:
http://demo.phppointofsalestaging.com --> Click Sales then resize the window in Chrome and then scroll down and then up. You will notice it is very bumpy and not smooth
:root { scroll-behavior: auto; }
Add this simple code to your custom CSS file.
"scroll-behavior" declared as "smooth" in bootstrap css/bootstrap.reboot.css.
So we need to overwrite it using our custom css.
The problem is in the jquery.nicescroll plugin that is used with the theme, the function jQuery.fn.scrollTop make the problem, it takes more than 75% from the cpu when run. my solution is :
You are using the jquery.nicescroll plugin version 3.4.0 use the latest version currently version 3.5.0 available.
If not working as expected, downgrade to version 3.2.0 I'm using it with my site without any problem.
Also check that if the hwacceleration in the Configuration parameters of the plugin is set to (default: true).
Update 1:
nicescroll plugin is a solution to have a custom scrollbars compatible with desktop, tablet and phone devices and to override the default scrollbars of the browser " more information her ", "you didn't see the diffrence because the plugin used in your project works when your browser window under 767px" so another solution if you don't need it you can remove the plugin from your files by following this steps:
Delete the plugin file (jquery.nicescroll.js) from your script folder.
Delete the plugin link from all your files.
Delete the plugin function lines (21 to 36), (49 to 66), (149) from (unicorn.js) file.
Update 2:
I made some tweaks for the (unicorn.js), download it from her, then replace your original one.
Hope this will help you.

Resources