Monitor console output of websites in Cypress.io - javascript

I am using Cypress.io to test our new application (Node, React), but I would like to be able to monitor and check the console.log output of the website for any errors that are not explicitly captured through our standard tests.
I am hoping that this will not only be used to capture stray console.log commands that should not be added to production-ready code, but will also capture deprecations and warnings from any of our dependencies.
Please can you let me know if this is achievable, and if so, how I would do it?
Thanks, Chris.

Check out this plug-in for Cypress that will print all browser logs to stdout:
https://github.com/flotwig/cypress-log-to-output
It only works for Chrome, so just make sure your CI is set up to use Chrome and you're using Chrome locally too.

let spyErrorLog;
before(() => {
Cypress.on("window:before:load", (win) => {
spyErrorLog = cy.spy(win.console, "error"); // can be: log, warn
});
});
after(() => {
expect(spyErrorLog).not.to.be.called;
});
from
see here Check if an error has been written to the console
https://docs.cypress.io/faq/questions/using-cypress-faq#How-do-I-spy-on-console-log
https://docs.cypress.io/examples/examples/recipes#Stubbing-and-spying

Related

How debug a nodejs API

I've been worked on a vue project.
This vue project use the nodejs API I've created, in simple way, they are two entire differents project which are not located in the same directory and they are launched separately.
The problem is whenever I debug a route with node --inspect --debug-break event_type.controller.js for example named:
"/eventtype/create"
exports.create = (req, res) => {
const userId = jwt.getUserId(req.headers.authorization);
if (userId == null) {
res.status(401).send(Response.response401());
return;
}
// Validate request
if (!req.body.label || !req.body.calendarId) {
res.status(400).send(Response.response400());
return;
}
const calendarId = req.body.calendarId; // Calendar id
// Save to database
EventType.create({
label: req.body.label,
}).then((eventType) => {
Calendar.findByPk(calendarId).then((calendar) => {
eventType.addCalendar(calendar); // Add a Calendar
res.status(201).send(eventType);
}).catch((err) => {
res.status(500).send(Response.response500(err.message));
});
}).catch((err) => {
res.status(500).send(Response.response500(err.message));
});
};
Even if I create a breakpoint on const userId = jwt.getUserId(req.headers.authorization);
and from my vue app I trigger the api createEventType event, my break point is not passed.
Also when I press f8 after the breakpoint on my first line with the debugger, my file close automatically.
I do not use VS Code but Vim for coding but I've heard that maybe Vs Code could allow a simplified way to debug nodesjs application.
NOTE: I use the V8 node debugger.
For newer NodeJS versions (> 7.0.0) you need to use
node --inspect-brk event_type.controller.js
instead of
node --inspect --debug-break event_type.controller.js
to break on the first line of the application code. See https://nodejs.org/api/debugger.html#debugger_advanced_usage for more information.
The solution (even if it's not really a solution) has been to add console.log to the line I wanted to debug.

Why does Chrome onerror handler not return full error messages?

Chrome outputs "Script error." and Firefox outputs "ReferenceError: d is not defined"
Run the following code in both browser's console and notice the difference.
Why is Chrome's message not as descriptive as Firefox's? How can one get a full error message out of chrome?
The code is wrapped in setTimeouts so that they can be ran in the same context for console running and output. The issue also occurs when ran as a script.
// custom global error handler
setTimeout(() => {
window.onerror = function(message) {
console.log("Error message: ", message)
return false
}
})
// create an error
setTimeout(() => {
d;
})
For anyone else that runs into this issue. It is known that webpack can interfere with window.onerror in chrome because of the webpack url scheme. In this case using chrome 69.03 and Webpack 3.12.0.
I could not find a workaround for these versions, but proper errors are reported from onerror when running the app from the build instead of in dev mode.

Capture browser console logs with capybara

I need to capture the console logs (category: info) of a browser using Ruby & Capybara. Until now I have tried using driver.manage.logs.get(:browser) or (:client) but, using this, the result is not what I want. It gives out the interaction results between selenium and browser where I can see my javascript statements sent for execution, but the resulting output fails to get captured.
Whether or not logs are available when using selenium depends on what browser you are using with Selenium. If you were using Firefox you'd be out of luck since it doesn't support the log retrieval API, however since you're using Chrome they are accessible. The issue you're having is that, by default, only WARN or ERROR level logs are captured. You can change this in the driver registration through the loggingPrefs capability
Selenium 3
Capybara.register_driver :logging_selenium_chrome do |app|
caps = Selenium::WebDriver::Remote::Capabilities.chrome(loggingPrefs:{browser: 'ALL'})
browser_options = ::Selenium::WebDriver::Chrome::Options.new()
# browser_options.args << '--some_option' # add whatever browser args and other options you need (--headless, etc)
Capybara::Selenium::Driver.new(app, browser: :chrome, options: browser_options, desired_capabilities: caps)
end
Selenium 4
Capybara.register_driver :logging_selenium_chrome do |app|
options = Selenium::WebDriver::Chrome::Options.new
options.add_option("goog:loggingPrefs", {browser: 'ALL'})
browser_options = ::Selenium::WebDriver::Chrome::Options.new()
Capybara.register_driver :chrome do |app|
Capybara::Selenium::Driver.new(app,
capabilities: options,
browser: :chrome)
end
end
and then specify to use :logging_selenium_chrome as your driver
Capybara.javascript_driver = :logging_selenium_chrome # or however else you're specifying which driver to use
which should then allow you to get the logs in your tests with
page.driver.browser.manage.logs.get(:browser)
Thomas Walpole answer is correct but it seems that nowadays if you are using chrome as your driver you should use
Selenium::WebDriver::Remote::Capabilities.chrome( "goog:loggingPrefs": { browser: 'ALL' } )
Notice goog:loggingPrefs instead of loggingPrefs only with this solution i was able to get console.log printed in the log.
Took me a while and got it from here https://intellipaat.com/community/5478/getting-console-log-output-from-chrome-with-selenium-python-api-bindings after several frustrating attempts.
November 2022 update, use:
page.driver.browser.logs.get(:browser)
Not sure that this is what you want, but take a look at https://github.com/dbalatero/capybara-chromedriver-logger.
It helps me identify the problem with dynamic modules import(''). Works both locally and in Github Actions / Circle CI by displaying failed loads of assets (which i believe outputs as console.error).

Protractor Get Errors Only From Console, Ignore Warnings

I have a test which is navigating to a certain area of our application and then checking to see if there are any errors in the console when this area of the application is load.
The problem is that it is failing on a warning. Is there anyway from within my test that I can make it look just for errors and not warnings?
it('Area of Application Loads With No Errors - Smoke', () => {
console.log('\n ### Area of Applications Loads With No Errors ### \n')
// Clear the Console before Navigating
browser.manage().logs().get('browser')
// Navigate
common.navigationOpenByClick()
navPage.navigateToApp(params.apps.areaOfApp.navLink)
// Check the console for errors
browser.manage().logs().get('browser').then(function(browserLog) {
expect(browserLog.length).toEqual(0)
})
})
Do you use multiCapabilities in your protractor.config file?
You can try this config below the browserName:
"loggingPrefs": {"browser": "SEVERE", "INFO", "DEBUG"}, //OFF, SEVERE, WARNING, INFO, DEBUG, ALL

ApplicationUpdaterUI fails for Mac

LOG:
Runtime Installer begin with version 3.3.0.3650 on Mac OS 10.7.4 x86
Commandline is: -updatecheck
Installed runtime (3.3.0.3650) located at /Library/Frameworks/Adobe AIR.framework
Performing pingback request
Failure during pingback request: [ErrorEvent type="error" bubbles=false cancelable=falsr eventPhase=2 text="Unhandled exception Error: Error #3001" errorID=3001]
Runtime Installer end with exit code 0
It works fine on Windows but fails for Mac.
Digging around I found out that the error code #3001 has something to do with file/directory permission issues.
Checked /Users/internetslave/Library/Application Support/Adobe permissions seems ok. source.
Checked /Library/Frameworks/Adobe AIR.framework seems ok too.
Both had drwxr-xr-x.
UPDATE: permission is not an issue, successfully updated other applications on the same system.
var appUpdater;
function checkForUpdates() {
appUpdater = new air.ApplicationUpdaterUI();
appUpdater.configurationFile = new air.File("app:/update/update-config.xml");
appUpdater.addEventListener(air.ErrorEvent.ERROR, onCheckForUpdatesError);
appUpdater.initialize();
setTimeout(function() {
appUpdater.checkNow();
}, 500);
}
function onCheckForUpdatesError(event) {
alert(event.toString());
}
Cant seem to post the update configuration and descriptor files here.
For those might stumble upon the same problem.
The problem was the ApplicationUpdaterUI has not finished initializing when the method checkNow is called.
So either, change the second parameter of the setTimeout to a higher value or place this part
appUpdater = new air.ApplicationUpdaterUI();
appUpdater.configurationFile = new air.File("app:/update/update-config.xml");
appUpdater.addEventListener(air.ErrorEvent.ERROR, onCheckForUpdatesError);
appUpdater.initialize();
in page onLoad event handler and attach the checkNow method to a button onClick event
function checkUpdates() {
appUpdater.checkNow();
}
<input type="button" onclick="checkUpdates()" />
Thanks!

Categories