How to check if an HTML5 validation was triggered using PhantomJS? - testing

I am testing my Ember app (Ember 1.6) using PhantomJS(ver. 2.1.1). I want to assert that an HTML5 validation is triggered for invalid input. Here is my test:
fillIn('#MyInputField', 'some invalid data');
click('#MyButton');
andThen(function() {
strictEqual(find('#MyInputField:invalid').length, 1, 'Expected HTML 5 validation triggered!');
});
This works fine when I test it using Karma running in a browser. But when testing in PhantomJS, this fails.
I have made screenshot, and according to that image, there is no HTML5 validation.

Do you need to upgrade Phantom? The default Phantom installed by many CI services (Phantom 1.9) is missing some ES6 features and may be missing what you need too.

Related

Why is my console.log() not logging anything in my browser?

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.

Is there a way to change the browser locale in Cypress?

I have looked around online and quite a bit on stackoverflow and cant seem to find an up-to-date answer for this question. I have found other questions here, here, and here - and none of those solution work anymore. Does anyone know if this functionality is available in Cypress or if there's a way to force a locale change? Thanks
That's not too easy - as this differs from the browser you will be running your tests in.
Also, I believe that only are testing that your application looks and behaves right when the USER selected a specific language, you should consider adding a parameter when initiating your test session, e.g.
http://myapp.com/start?lang=en
then storing the selected language in LocaleStorage or a Cookie and selecting the language from there, as it is a lot more portable - and you will have users wanting to use your application in a different language than the browser default.
Still, There might be a few scenarios (e.g. if you want to tests, that your application detects the browser language correctly) where setting the browser language can be required, but I would suggest keeping tests that rely on a browser configuration to a minimum.
Is is possible tho, at least for Electron (verified with Electron 100) and Firefox (verified with Firefox 102). It used to work in Chrome too, but doesn't work for me anymore.
For Electron:
As Electron is being started along with the cypress GUI, changing the language afterwards is not possible. But you can expose an environment variable to the process, e.g.
ELECTRON_EXTRA_LAUNCH_ARGS=--lang=en npx cypress open
to start electron with the wanted locale.
For Firefox:
In your cypress.config.ts expand the defineConfig to contain such a block:
export default defineConfig({
// ...
e2e: {
// ....
setupNodeEvents(on, config) {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'firefox') {
launchOptions.preferences['intl.locale.requested'] = "en_US"
return launchOptions
}
}
}
}
The Firefox Setup will only work, if you have no other Firefox instance running in another locale.

TestCafe: Uncaught ReferenceError: pagespeed is not defined

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.

Can I run Durandal's Tests Framework outside of PhantomJS?

The Durandal Test Framework runs Jasmine tests within PhantomJS.
Where I'm implementing this for the first time I'm getting a lot of errors, and reading through these on the command prompt is proving to be very tedious.
If I load up the spec.html file in my web browser, it tells me that no specs were found:
Yet PhantomJS is able to find the specs with no problem:
Is there a way I can configure these Jasmine tests to run through my web browser and not through (or as well as) PhantomJS?
I've set up a new index.html file and have replaced the var runTests = ... section with a simple require() call:
require(['../test/specs/system.spec.js']);
Durandal's system.spec.js file is loaded in the browser, but Jasmine is still stating that no specs were found.
Jasmine's tests weren't being run because I wasn't telling it to re-execute. The solution to this was to simply re-execute by calling this within the require callback:
require(['../test/specs/system.spec.js'], function() {
jasmine.getEnv().execute();
});
Note: A drawback of this is that the 'no specs found' bar is still present and the 'raise exceptions' control on the re-executed specs doesn't appear to function:

AngularJS : e2e tests with Karma Scenario Test Runner using cached source?

I am trying to set up some AngularJS e2e tests with Karma Scenario Test Runner. I did some modifications to the source files, but Karma doesn't seem to use these latest versions when testing.
In the source files, I added ids to some elements. Karma still couldn't find them, so I added a pause in the e2e test, so that I can mark and "Inspect elements" (using Chrome) on the current page in the test runner. The source code seems correct, except the latest changes are missing, i e, the ids aren't there. So what's happening here? Do I need to explicitly tell Karma the files have been updated somehow?
You can fix this issue by forcing angularjs to clear the application cache:
app.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
In Chrome developer tools settings, check "Disable cache (while DevTools is open)".
Obviously, this is a much more general issue than Angular's e2e test runner, but I decided to leave it here for now, in case somebody else has the same question.