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

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.

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.

How to Manage Staging and Production Environments in a React Native App

I got a react-native app already ready and works but the app points on a prod api so to avoid problems I wanted that she points on a rest api, so how can I reconfigure it, I have only an environment file.js that contains the URL api, and this file is called in the API service
I tried react-native config but didn't know how to make it work,
All I want is to duplicate that env file because he contains all necessary URLs, so I want to have file named envProd and another named envStaging they should be similar the only different part is the URL of my api , so when I want to run the app i precise which file I want to choose to run with
If the API URL's are the only difference, you don't need to create two separate config files. Instead, you can make use of the inbuild __DEV__ global variable in JavaScript to determine if you're using React Native packager (dev mode) or not (production).
Ref: https://facebook.github.io/react-native/docs/javascript-environment.html
So, something like below.
var apiURL = __DEV__ == true ? 'development.api.com' : 'prod.api.com';
I am finding switching environments quite hard to manage.
__DEV__ is awesome for local disabling stuff when in development. Won't work for any of the builds though.
For staging vs production seems that configuring react-native-config is the best. Unfortunately, next to being somewhat hard to configure binaries need to get recompiled separately for each environment. This means - one update - two build with uploads to whatever provider you use. It can get more complex if you use something like codepush too.
possible solution
Create a hidden feature in your app that allows to toggle the environment from the within the app. This way you can have one build, give it to testers. They switch env to staging and later you only need to promote it as a production build.
This could be something like tap 10 times on an empty space somewhere - the more creative you get the better :)
Good luck
const _Environments = {
production: {
API_BASE: 'https://api.test.com/',
USERNAME: 'admin',
PASSWORD: '1234',
},
development: {
API_BASE: 'https://dev.api.test.com/',
USERNAME: 'admin',
PASSWORD: '1234',
},
};
function getEnvironment() {
// Insert logic here to get the current platform (e.g. staging, production, etc)
var platform = __DEV__ ? 'development' : 'production';
// ...now return the correct environment
return _Environments[platform];
}
export const Environment = getEnvironment();
Try this. using yargs you can replace static import content with dynamic scripts.

Test VueJs localization using Nightwatch

I have an application that I started in English from scratch. I had nightwatch tests and everything is working perfectly fine... but after adding 2 more languages, I want the main tests to run as they used to in English, then change the browser language (since that's the criteria on which I choose the language) so I can run the other tests in German or French... etc. Is there a way to start a test suite by changing the browser's language?
I looked into the documentation and found nothing in this area
In order to set the language and run the tests locally, I did the following:
chrome: {
desiredCapabilities: {
chromeOptions: {
prefs: {
intl: { accept_languages: "ss-ZA" }
}, args: []
}
}
}
this allows you to run the tests locally, on only that language. or you can manage setting that locale code to a variable in a way and try setting it at the beginning of your test suite.
I did not get that far, because in my case, I have to run my tests headless because they will run later on a remote git server that runs only headless tests. According to this issue on Nightwatch's github page, setting a browser language parameter for a headless test is not possible!

Why in Opera the 'chrome_url_overrides' is not allowed for specified extension ID?

I am making a cross-browser extension, which overrides the standard "New Tab" page.
There is a manifest.json key for that, called chrome_url_overrides:
"chrome_url_overrides": { "newtab": "index.html" }
It works in Chrome and Firefox! But in Opera (45.0) the following error occurs when I try to load the extension:
'chrome_url_overrides' is not allowed for specified extension ID.
Based on what I've read in the MDN chrome_url_overrides docs, Opera supports that.
Now I'm not sure if Opera doesn't allow that in general, or if there is a way to activate it?
Edit: I found a similar, unanswered yet, 3-months-old thread in the Opera Forums.
Actually Opera now officially does not support chrome_url_overrides. A piece of evidence can be found on the MDN page that you referenced and it was confirmed by an Opera representative in their forum.
A potential workaround for achieving a new tab extension in Opera (actually this should work in other browsers too) is to use a background script with the following code:
const redirectURLS = [
"opera://startpage/",
"browser://startpage/",
"chrome://startpage/"
];
chrome.tabs.onCreated.addListener(function(tab) {
for (let i = 0; i < redirectURLS.length; i++) {
if (tab.url === redirectURLS[i]) break; // user is trying to open startpage
if (i == redirectURLS.length - 1) return; // Tab is not trying to open a startpage
}
chrome.tabs.update(tab.id, { url: "index.html" });
});
Having this will check if the user tries to open a new tab and if this is the case it will open the custom index.html page that came with installing the plugin instead. It's a hacky and dirty and not sure if it's going to be accepted by Opera but still, this may be a path of salvation for someone desperately trying to get a new tab extension live among the other Opera Addons.
Fun fact: Opera developed and distributed an addon which helps you install chrome extension from chrome extension store on Opera but the new tab extensions don't work and fail upon installation with the following message:
[Compatibility notice]
Please, be aware that this extension requires APIs that are not supported in Opera.
It still can work in Opera, so complete installation to verify.
Opera's Acceptance Criteria say that:
Extensions cannot replace Opera’s default start page.
Even if you manage to accomplish your aim and replace the standard "New Tab" page, then the extension will not pass moderation.
Workarounds include assigning a keyboard shortcut to open your page, or launching it from a browser action button.

Yii CAssetManager.basePath is invalid on PHPUnit test

i have a problem to run test. My model use extension Yii mail and then i run test its fail with wrong assert path. Another test runs finaly (model dont use any extensions). Preloading is only log.
I had a similar error and I explicitly set the basePath in config/test.php.
'components'=>array(
...
'assetManager'=>array(
'basePath'=>dirname(__FILE__).'/../../assets',
)
)
Im solved problem
public function setUp(){
Yii::app()->assetManager->basePath = '../../asserts';
}
Im dont know why this error throw only in one model...
PhpUnit runs primary in CLI mode and therefore some of environmental variables are missing. Yii's AssetManager uses one of such variable to determine webroot and since the variable does not exist, it will either throw error or set up invalid assets path on first attempt.
In my opinion, this issue is (indirectly) caused by PHPUnit because it only supports CLI testing mode, which makes some things really more difficult to test than it would be in HTTP request mode. Some guys therefore wrote tools to run unit tests via standard web GUI with whole native HTTP environment (e.g. https://github.com/NSinopoli/VisualPHPUnit). Eventually, you may use HTTP clients like Selenium to run your tests as if clicking over the page (see http://phpunit.de/manual/3.7/en/selenium.html).
Nevertheless, it's a matter of subjective opinion - somebody may argue, that testing in CLI mode has advantages, some guys will hate it. But the fact is, that one has to bear in mind differences between HTTP and CLI mode.