My question is about configuring Cypress to launch a browser instance in a certain language.
In order to:
make assertions on localized (i18n) text labels?
check i18n features (switching between languages)
bypass issues of Continuous Integration (CI/CD) when, for example, on
a local computer, the browser default to fr_FR, and on the CI/CD VM it defaults to en_US?
I tried (without much success):
using LANGUAGE=en_US from the terminal invocation,
using the Browser's API plugin (see Cypress' browser launch API documentation)
Thanks!
from Gleb Bahmutov:
you set it during cy.visit using onBeforeLoad with something like Object.defineProperty(navigator, 'language', { value: 'de-GE' })
src: https://gitter.im/cypress-io/cypress?at=5d61408a07d1ff39f8769545
To set the language in the browser and also for request, which was what I had to do for my tests, the following worked for me:
cy.visit('url', {
onBeforeLoad(win) {
Object.defineProperty(win.navigator, 'language', { value: 'de-DE' });
Object.defineProperty(win.navigator, 'languages', { value: ['de'] });
Object.defineProperty(win.navigator, 'accept_languages', { value: ['de'] });
},
headers: {
'Accept-Language': 'de',
},
});
navigator has two lang props:
language ({ value: 'en-GB'}
languages(['en-GB'])
navigator.language refers to the first element of navigator.languages
but some libraries check navigator.languages[0] instead of navigator.language, so better if you set both properties
onBeforeLoad: (window, ...args) => {
Object.defineProperty(window.navigator, 'language', { value: 'en-GB' });
Object.defineProperty(window.navigator, 'languages', ['en-GB']);
ref: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages
In support/index.js
Cypress.on('window:before:load', window => {
Object.defineProperty(window.navigator, 'language', { value: 'fr' });
});
Someone got it working with this: (I couldn't)
Source: https://github.com/cypress-io/cypress/issues/7890#issuecomment-824676390
// cypress/plugins/index.js
on('before:browser:launch', (browser, launchOptions) => {
if (browser.name === 'chrome') {
launchOptions.args.push('--lang=en-GB');
return launchOptions;
}
});
Related
I am currently facing a wall in the localization process of a website. Using i18next, all of our routes are translated and default language has the locale path removed from the URL.
In other words:
/accueil -> /en/home
/produits -> /en/products
and so on...
My issue is when I change the language, the url does not follow (which is to expect, since i18next doesn't talk directly to react-router).
i18next configuration:
i18n
.use(detector)
.use(initReactI18next)
.init({
whitelist: ['fr', 'en'],
fallbackLng: 'fr',
defaultNS: 'common',
detection: {
lookupFromPathIndex: 0,
checkWhitelist: true
},
interpolation: {
escapeValue: false
},
resources: {
en: {
routes: enRoutes,
[...]
},
fr: {
routes: frRoutes,
[...]
}
}
});
fr/routes.json:
{
"home": "/accueil",
"products": "/produits",
[...]
}
en/routes.json:
{
"home": "/en/home",
"products": "en/products",
[...]
}
Router portion in app.jsx:
<Router forceRefresh>
<Switch>
<Route path={`/:locale(en|fr)?${t('routes:home')}`} component={HomeComponent} />
<Route path={`/:locale(en|fr)?${t('routes:products')}`} component={ProductsComponent} />
</Switch>
</Router>
With the following configuration, pages render without issue and easily translate when i18n.changeLanguage is called, but the url doesn't change with it. I've searched everywhere and can't seem to find a go-to approach to translate the url once the language is changed.
I also want to handle a case where the user would change the locale manually directly in the browser url field.
I have tried updating the url on 'languageChanged' event in i18next, but finding the key to the page currently being since adds a lot of complications.
Thx in advance for any help provided.
I finally found an easy and clean method to change the route while also changing the language.
const changeLanguage = (nextLanguage) => {
const routes = i18n.getResourceBundle(i18n.language, 'routes');
const currentPathname = window.location.pathname.replace(/\/+$/, '');
const currentRouteKey = Object.keys(routes).find((key) => routes[key] === currentPathname);
window.location.replace(t(`routes:${currentRouteKey}`, { lng: nextLanguage }));
};
I also needed to change the i18next detection options as follow:
detection: {
order: ['path', ...otherMethods]
lookupFromPathIndex: 0,
checkWhitelist: true
},
I can now safely call this changeLanguage wrapper anywhere and it will handle both the language change (which goes to the default in case it's not part of the url) and the route change.
I am trying to transpile my ES6 code via Babel, I am using the next/babel preset along with preset-env and I'm using the browsers: defaults target.
The NextJS preset comes with #babel/plugin-proposal-object-rest-spread in its plugins array, I'm wondering why I am getting an error when testing on edge that says Expected identifier, string or number, and when looking in the compiled JS for the error, I see it happens when {...t} occurs.
Here is my babel.config.js:
module.exports = {
presets: [
[
'next/babel',
{
'#babel/preset-env': {
targets: {
browsers: 'defaults'
},
useBuiltIns: 'usage'
}
}
]
],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
['styled-components', { ssr: true, displayName: true, preprocess: false }],
[
'module-resolver',
{
root: ['.', './src']
}
]
],
env: {
development: {
compact: false
}
}
};
Any help on this would be greatly appreciated!
In the end my problem was related to a package that was not being transpiled by babel. My solution was to use NextJS' next-transpile-modules plugin to get babel to transpile the package code into something that would work on the browsers I need.
Here's an example of my NextJS webpack config with the package I need transpiled specified:
const withTM = require('next-transpile-modules');
module.exports = withTM({
transpileModules: ['swipe-listener']
});
SCRIPT1028: Expected identifier, string or number error can occur in 2 situations.
(1) This error get trigger if you are using trailing comma after your last property in a JavaScript object.
Example:
var message = {
title: 'Login Unsuccessful',
};
(2) This error get trigger if you are using a JavaScript reserved word as a property name.
Example:
var message = {
class: 'error'
};
solution is to pass the class property value as a string. You will need to use bracket notation, however, to call the property in your script.
Reference:
ERROR : SCRIPT1028: Expected identifier, string or number
I am using i18n - aurelia's wrapper of i18next with the following configuration:
instance.i18next.use(Backend);
return instance.setup({
backend: {
loadPath: 'assets/locales/{{lng}}/{{ns}}.json',
},
detectFromHeaders: false,
lng: 'bg',
fallbackLng: 'bg',
ns: ['app', 'dp', 'management'],
defaultNS: 'app',
fallbackNS:'app',
attributes: ['t', 'i18n'],
useCookie: false,
getAsync: false,
debug: false
});
I have a component that switches to a different language via the setLocale(language) function. It works fine for the translations, however, when I switch between the languages for some reason i18next adds the translation.json to my namespaces although I don't use it and it makes an xhr call to get it and I get a 404 error for translation.json - a namespace I don't even want in the first place. Is there an option to remove it altogether from the namespaces?
Thanks in advance
The issue is not part of Aurelia-I18N but one of i18next itself. The only workaround I found so far is to set the fallbackLng to false.
{
backend: {
loadPath: './locales/{{lng}}/{{ns}}.json',
},
lng : 'de',
ns: ['foo'],
defaultNS: "foo",
attributes : ['t','i18n'],
fallbackLng : false, <----- SET THIS TO FALSE TO AVOID A SEARCH FOR translation NS
debug : false
}
This is a known issue that can be tracked here: https://github.com/aurelia/i18n/issues/47
i'm using solr+haystack(django plugin) on the backend and the search is working fine;
While Django(and Haystack) with its templates is doing everything for me(I mean its pretty simple to configure and use), ExtJS4 is a little more complex;
The question is how to use Solr using ExtJS4?
An example is very much appreciated;
Thanks for any help and sorry for my English;
As ExtJS4 is a MVC framework, the solution is done like MVC;
The controller/Search.js
Ext.define('yourapp.controller.Search',{
extend:'Ext.app.Controller',
stores:[
'Searches'
],
views:[
'search.Search',
'search.SearchList'
],
models:[
'Search'
],
init:function(){
this.control({
"search":{
'keyup':this.search,
},
});
},
search:function(inputedTxt, e, eOpts){
this.getSearchesStore().load({
//When sending a request, q will rely to request.POST['q'] on server-side;
//inputedTxt.getValue() -- a value, entered in textfield (or whatever)
params:{
q:inputedTxt.getValue()
},
callback:function(result){
if(result[0]){
//do something with the result
//i'd been creating a window with a grid inside. "Grid"'s view is written below.
}
}
}
});
The models/Search.js
Ext.define('yourapp.model.Search',{
extend:'Ext.data.Model',
fields:[
{name:'name', type:'string'}
]
});
The store/Searches.js
Ext.define('yourapp.store.Searches',{
extend:'Ext.data.Store',
storeId: "searchStore",
model:'yourapp.model.Search',
autoLoad: false,
proxy:{
type:'ajax',
// server-side url
url: '/searchlist/',
actionMethods:{create: "POST", read: "POST", update: "POST", destroy: "POST"},
reader:{
type:'json',
root:'searches'
}
}
});
The view/search/Search.js
//a Text field to input text;
Ext.define('yourapp.view.search.Search',{
extend:'Ext.form.field.Text',
alias: 'widget.search',
id: "searchView",
enableKeyEvents: true,
initComponent:function(){
this.callParent(arguments);
}
});
The view/search/SearchList.js
//a view for a result
Ext.define('yourapp.view.search.SearchList',{
extend: 'Ext.grid.Panel',
alias:'widget.searchlist',
title: 'search result',
store: 'Searches',
columns:[
{
header:'Name',
dataIndex:'name',
flex:1
}
]
});
Somewhere in the view/Viewport.js xtype: 'search', should be inserted for a text field to be displayed.
That's all for a ExtJS4 part.
On server-side -- Django:
'haystack' and Solr should be installed and configured (by 'configured' i mean: search should already work on the server-side);
In someapp/view.py
def searchlist(request):
from haystack.query import SearchQuerySet
# POST["q"] should be receivedt from our client-side
searchText = request.POST["q"]
sqs = SearchQuerySet().filter(name=searchText)
data = []
for result in sqs:
data.append({"name": result.object.name})
return HttpResponse('{ success:true, searches:'+simplejson.dumps(data)+'}', mimetype = 'application/json')
Finally in your urls.py you should add:
(r'^searchlist/','someapp.views.searchlist'),
That was for it. Best wishes.
P.S.
I know this is not the greatest answer and there's lack of explanation, but as for me, I rather prefer a code example than verbal explanation.
SOLR has JSON output from its queries using wt=json param and can readily be consumed by ExtJS.
http://wiki.apache.org/solr/SolJSON?action=fullsearch&context=180&value=jsonp&titlesearch=Titles#JSON_Response_Writer
if you need to use jsonp you can specify a callback function via this param json.wrf=callback
I have a JSONStore like :
OrdersStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
OrdersStore.superclass.constructor.call(this, Ext.apply({
storeId: 'ordersStore',
url: '/ajaxSupport.action',
root: 'rows',
baseParams: {
action: 'getorderlegsearchgrid'
},
fields: [
{
name: 'orderId'
}
]
},
cfg));
}
});
new OrdersStore();
This store is attached to a grid : 'pendingOrdersGrid'.
When I do:
alert(Ext.util.JSON.encode(this.pendingOrdersGrid.getStore().getAt(0)));
I hope to get the first record. But I get 'null'
I can't give you a complete answer from this information but some hints:
don't extend a store with a fixed storeId, url or fields! That's really bad design
if possible use browser that supports a console (Firefox with firebug or IE with developer toolbar [or FF4/IE9]) and debug the content of your store in the console.
to read the content of a record try something like this.pendingOrdersGrid.getStore().getAt(0).data.orderId