There is an option to disable screenshots in cypress.json but only for "screenshotOnRunFailure", when Cypress automatically takes a screenshot when there is a failure. Is it possible to disable custom screenshot "cy.screenshot()" passing parameter in run command like for video --config video=false. For example:
it('test screenshots', () => {
cy.get('someElement').click(); // user is redirected to another page
cy.screenshot();
cy.get('someElement').click();
cy.screenshot();
});
So, I need to run a command to include and ignore screenshots.
Related
Click here for image that compares the two different results returned for the same javascript command.
On the left is the image of the web page run inside Cypress Test Runner.
On the right is the image of the web page is a regular browser.
To produce the same result :
In standalone Chrome, load this url, open dev tools and then run the javascript command shown below.
document.querySelector('body#google-amp-body > amp-analytics:nth-child(3) > script')
Copy the following code into a spec file and run it inside Cypress Test Runner. Then open dev tools in the Test Runner window and run the same javascript command. You won't get anything back for this use case. See above screenshot to get a visual sense of what I mean.
If I try to perform cypress tests based on that element in Cypress I get nowhere because that element cannot be found inside Cypress.
If I access the same element via Python/Selenium code, it works fine.
describe('Gamespot Test', () => {
it('Tests for Video Page', () => {
const url = "https://gamespot.com/amp-videos/rainbow-six-extraction-final-preview/2300-6457072/"
cy.visit(url)
})
})
I have a SSR page build on Nuxt (Vue). There is a simple code which runs in the browser.
methods: {
submitGeneralForm() {
alert("submit");
console.log('teeeeeeeeeeeeeeeeeeeeest')
},
SSR means that site it rendered on the server and then send to the browser. This piece of code should run in the browser. It is related to the button click. Alert works fine but I dont see any console.log() in the browser. Dont understand it. What is wrong with that?
EDIT:
Here is the example Github repository. Run yarn install + yarn dev to reproduce the issue. Node version v14.17.6 npm version 6.14.15 and yarn version 1.22.11 You will see alert() on page load from /layouts/default.vue which contains this code
export default {
mounted() {
alert('11111111111111');
console.log('22222222222222');
alert('33333333333333');
}
};
This is screenshot of console.log() in console.
Make sure you don't have anything in the console's filter input field.
For example, in the following image you can see the word "status" is masking the console.log() log lines:
I'm not sure why your code is not printing the console.log() since it's something basic and does not require any specific configuration.
I've tested your repro and it's working perfectly fine on both Chrome and Firefox. Maybe try another browser, factory reset it or ask a buddy to try on their side.
This is something on your machine IMO.
Also, be aware of the filter on top of the console, be sure that nothing is present here, otherwise it could filter the things you see in the actual console.
In your Browser you have a Console Output Section, where you also have some settings. There you can set the log levels, which should be in your output (Verbose, Info, Warnings and Errors). Console.logs are logged under the level Verbose, so you have to make sure this option is checked. By default this option is unchecked in some cases.
You have a filter, "status". It will filter anything which does not contain "status" keyword in it.
I have write a few browser test who run with TestCafe, chrome:headless. The test are launched by commandline, from a server that I don't want to change the default language.
My website is multi-language. I want to be change the language of the test, without having to impact the language of the server/computer each time. How can I do that?
I launch the tests with this command line:
npx testcafe chrome:headless src/scenarios/**/*.test.ts
It all depends on your "multi-language" implementation:
Navigate to some "locale" page version (example.com/en/).
Start your tests from a landing page and then navigate to the specific "locale" version:
await t
.click(Selector('#choose-lang-combo')
.click(Selector('#en-lang'))
Try to add your own Accept-Language header to your request.
Use a custom user profile. Maybe just using the --lang flag (testcafe chrome --lang=es) will help you (without the custom user profile):
For example, to create a shortcut that launches Google Chrome in Spanish (es), you might create a shortcut named chrome-es that has the following target:path_to_chrome.exe --lang=es --user-data-dir=c:\chrome-profile-es
I'm trying to integrate puppeteer in a vue.js application to generate screenshots and pdf files.
I have write a function that use puppeteer to generate a screenshot, works perfectly.
export const MyScripts = {
getMiniature : async function(elementId, key) {
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Making a screenshot
}
}
When trying to integrate that function, it fails to load puppeteer.
The 'require' doesn't generate error, but when I call puppeteer.launch(), I got the following message:
TypeError: nodeFunction is undefined
I've read that puppeteer is not supposed to work with front-end application, so I hope I have not chosen the wrong direction.
So how can I make it work ?
If it is not possible, what can I use to generate screenshots or pdf ?
Thanks in advance
Puppeteer works with Node, it has nothing to do with Vue. Node.js is pretty much JavaScript running on a server and therefore separated from your frontend. Puppeteer uses a headless browser(and therefore your actualy system) to generate the screenshots and PDF files.
A client-side browser has no access to your filesystem and so therefore you can't use it in a frontend framework like Vue to generate screenshots and save them.
I don't know of any tools to generate screenshots of the current page that are not highly experimental but I am sure you could find some more information when deep-diving stackoverflow.
Disclaimer: This will not show you how to run puppeteer (chromium) on client side. This will only show you how to connect to a puppeteer instance running somewhere else.
Right now it's definitely possible on puppeteer version 1.9.0 (with a bit of headache).
Below I listed puppeteer web, client side pdf and image generation and external API.
1. Puppeteer web
It looks like you're trying to bundle puppeteer to use in a web application. Tip-of-tree Puppeteer is much more bundling-friendly and includes the browser field in its package.json that should help with bundling.
One thing you have to understand that the frontend does not have any access to the backend by any means other than REST/WS API. So either you have to use those API or build some api by yourself. You can build a simple express API and use that from the vue app. There are lots of resources and stackoverflow questions for that.
On that note, let's use the shiny puppeteer-web bundle. :)
Run Chrome and get browserWSEndpoint
You need to run chrome somewhere to have this. Probably on the server you are hosting the vue app. Assuming it's the chromium, you can use following code
chromium
--disable-background-networking \
--disable-background-timer-throttling \
--disable-breakpad \
--disable-client-side-phishing-detection \
--disable-default-apps \
--disable-dev-shm-usage \
--disable-extensions \
--disable-features=site-per-process \
--disable-hang-monitor \
--disable-popup-blocking \
--disable-prompt-on-repost \
--disable-sync \
--disable-translate \
--metrics-recording-only \
--no-first-run \
--safebrowsing-disable-auto-update \
--enable-automation \
--password-store=basic \
--use-mock-keychain \
--remote-debugging-port=0
This will result in something like,
DevTools listening on ws://127.0.0.1:57683/devtools/browser/foo
Make puppeteer browser version
Clone the puppeteer repo, install all modules and run the command to get specific web version you can embed on your UI.
git clone https://github.com/GoogleChrome/puppeteer
npm install
npm run bundle
You will see a utils/browser/puppeteer-web.js file. That's what you need to embed on your vue or web app.
Require puppeteer browser and connect to the endpoint
<script type="text/javascript" src="puppeteer-web.js"></script>
<script type="text/javascript">
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.connect({
browserWSEndpoint: theirBrowserWSEndpoint
// the exact same browser WS endpoint that just loaded this page,
// example, ws://127.0.0.1:57683/devtools/browser/foo
});
const page = await browser.newPage();
.. a whole bunch of operations to perform to data scraping, etc.
})()
</script>
PS: I will write an in depth article/answer about it soon with all kind of screenshots, stay tuned.
2. Capture current page as screenshot and pdf
You can use html2canvas to gather screenshot of current page. It's as simple as calling and using it. vue-resume uses this to generate final image. Useful if you are trying to capture the current page or any part of it.
Example usage,
var element = document.getElementById('capture');
html2canvas(element).then(canvas => {
document.body.appendChild(canvas) // do whatever want with the image data
});
Same with PDF generation. You can use html2pdf to do that.
var element = document.getElementById('capture');
html2pdf(element); // prompts the user to save the result
3. Screenshot Generation API
If you still need to generate screenshot, you can use available services. Here are some of them, (ps, the list might not be updated in future, and fail to work.)
Restpack: https://restpack.io/screenshot
Thum: https://www.thum.io
URL2PNG: https://www.url2png.com
url-to-pdf-api: https://github.com/alvarcarto/url-to-pdf-api
New to TestCafe.
Expected
Given .js below, expected behavior when running testcafe chrome this.js is to click on the header logo.
Actual
Uncaught ReferenceError: pagespeed is not defined (at the click below).
On our prod site, this error doesn't happen so most likely some configuration (possibly my version of Apache?) but I wanted to make sure there weren't any TestCafe specific issues. Followed installation using the standard docs (npm)
Thanks in advance!
import { Selector } from 'testcafe';
fixture `A set of examples that illustrate how to use Little Passports`
.page `https://xxx.xxdev.us/`;
test('My Company', async t => {
await t.
click('.header-logo');
});
I think I'll currently get around this by adding -e, but I'll keep this open just in case there's something else to consider...
By default, a test fails when there is a JavaScript error on page. The "-e (--skip-js-errors)" parameter allows running tests by skipping this JS error.
To check if there are any errors on your page, open your browser console. If there are any, you can either fix the errors at the application level (a preferable approach) or skip them during test run using the "-e" parameter.