I am using codeceptJS with webdriverio Selenium standalone server. my problem is how do i load my unpacked chrome extension when i run tests. i’ve been searching for the solution from past 2 days but couldn’t find a solution. all i get is some java code from searches.
first of all thank you very much both of you wOxxOm && Yandimirkin Vladislav
what i did was added few lines into codecept.conf.js
desiredCapabilities: {
chromeOptions: {
args: [ "--load-extension=D:/Projects/dpl/dist", "--disable-gpu", "--window-size=1366,768" ]
}
}
Here is what codecept.conf.js looks like now:
exports.config = {
tests: './*_test.js',
output: './output',
helpers: {
WebDriver: {
url: 'http://localhost',
browser: 'chrome',
desiredCapabilities: {
chromeOptions: {
args: [ "--load-extension=D:/Projects/dpl/dist", "--disable-gpu", "--window-size=1366,768" ]
}
}
},
ResembleHelper : {
require: "codeceptjs-resemblehelper",
screenshotFolder : "./tests/output/",
baseFolder: "./tests/screenshots/base/",
diffFolder: "./tests/screenshots/diff/"
}
},
plugins: {
wdio: {
enabled: true,
services: ['selenium-standalone']
}
},
include: {},
bootstrap: null,
mocha: {},
name: 'codecept'
}
1) Add to you
capababilies: { extensions: extensionsToLoad }
Where extensionsToLoad is array of base64 encoded extensions, something like this
fs.readFileSync("./test.crx").toString("base64")
Related
I am building a project with webpack module federation with the following setup:
React host (running on localhost:3000)
Angular Remote 1 (running on localhost:4201)
Angular Remote 2 (running on localhost:4202)
The goal is to get both remotes working. If I only run one of the and remove the other it is working perfectly.
The issue I am facing is that when the remotes are loaded, __webpack_require__.p is set by one of the remotes' script and therefore the other remote's chunk is loaded from the wrong url.
Here is the error I get:
My module federation config is the following:
React host:
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1#http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2#http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
Angular Remote 1
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Angular Remote 2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Thins I have tried so far:
Playing around with public path (between auto and hardcoded)
Setting a custom chunkLoadingGlobal for both remotes (not the host)
The exact reproduction of this issue can be found here: https://github.com/BarniPro/react-host-angular-remotes-microfrontend
Any help is greatly appreciated.
The issue can be solved by setting the topLevelAwait experiment to true in the remotes's webpack.config.js:
experiments: {
topLevelAwait: true,
},
This results in the two remotes loading in sync which prevents the paths from overriding each other.
Another update I had to make was disabling the splitChunks option in the remotes' optimization settings (see SplitChunksPlugin):
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
The Github repo has been updated with the working solution.
I am using in my next js application Cypress and Jest. Running jest --coverage i get an error:
STACK: Error: Duplicate plugin / preset detected.
If you 'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
This is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": ["istanbul"]
}
Who faced with the same issue and how to solve it to get the coverage?
I found the solution that helped to solve the problem.
I had to add the env variable to the .babelrc
{
"env": {
"component": {
"plugins": [
"istanbul"
]
}
}
}
Then add it to cypress.config.js
const { defineConfig } = require('cypress');
const { devServer } = require('#cypress/webpack-dev-server');
const webpackConfig = require('./config/cypress.webpack.config.js');
const codeCoverageTask = require('#cypress/code-coverage/task');
module.exports = defineConfig({
viewportWidth: 1000,
viewportHeight: 660,
video: false,
env: {
BABEL_ENV: 'component',
},
component: {
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: 'react',
webpackConfig,
});
},
specPattern: 'src/**/*.cy.{js,ts,jsx,tsx}',
setupNodeEvents(on, config) {
codeCoverageTask(on, config);
return config;
},
},
});
Build Errors on Netlify. Build exceeds maximum allowed runtime.
Can build locally running yarn build and inside the Netlify docker container, however when on Netlifys build it exceeds maximum allowed runtime.
Am getting some warnings like the below when running in the Netlify docker container
Warning: a promise was created in a handler at opt/buildhome/repo/node_modules/postcss/lib/lazy-result.js:213:17 but was not returned from it
Warning: a promise was created in a handler at /opt/buildhome/repo/node_modules/gatsby-transformer-remark/extend-node-type.js:179:19 but was not returned from it
Those two warnings are pointing to two Gatsby plugins I have configured. (Config below)
require('dotenv').config();
module.exports = {
siteMetadata: {
title: 'My Website',
},
proxy: {
prefix: '/.netlify/functions',
url: 'http://localhost:9000',
},
plugins: [
'gatsby-plugin-eslint',
'gatsby-plugin-react-helmet',
'gatsby-plugin-postcss',
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.SPACE_ID,
accessToken: process.env.ACCESS_TOKEN,
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
exclude: /img/,
},
},
},
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images-contentful',
options: {
maxWidth: 590,
},
},
],
},
},
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
};
Have tried to debug all weekend but not sure what else to do. I couldn't find anyone else who has had similar issues.
I have a feature that acts differently for mobile web / desktop. My media query is running on device-width, for example:
#media only screen and (max-device-width: 1024px) {
...
}
This means that I cannot just change browser size (it will not work):
browser.manage().window().setSize(320, 480);//will not be affected by 'device-size' media query
I found an option to change chromeOptions on device capabilities. I tried using this with multiCapabilities:
'use strict';
var config = require('infra-gruntfile/protractor-conf').config;
// old capabilities
// config.capabilities = {
// browserName: 'chrome'
// };
config.multiCapabilities =
[
{
browserName: 'chrome',
name: 'Unnamed Job',
count: 1,
shardTestFiles: false,
maxInstances: 10,
chromeOptions: {
'mobileEmulation': {
'deviceName': 'Apple iPhone 4'
},
args: [
'incognito',
'disable-extensions'
]
},
loggingPrefs: {
browser: 'ALL'
},
specs: ['app/**/*.mobile.spec.js']
},
{
browserName: 'chrome',
specs: ['!app/**/*.mobile.spec.js']
}
]
module.exports.config = config;
It looks like specs doesn't work (I was trying different spec options) but all of them will run all test on both mobile/non mobile browser. I need the test mobile test to run only on mobile, while all others on regular browser.
Do I have a programatically way of doing this during my test (and not using config)?
What am I doing wrong with my current config? Why isn't specs working for me?
After reading this post I figured out that the problem is that the capability-specific specs are in addition to the main config.specs.
This means I have to remove the defaults arrived from my infrastructure config file, using specs: []
'use strict';
var config = require('infra-gruntfile/protractor-conf').config;
// old capabilities
// config.capabilities = {
// browserName: 'chrome'
// };
config.specs = []; //This line solved my problem!
config.multiCapabilities =
[
{
browserName: 'chrome',
name: 'Unnamed Job',
count: 1,
shardTestFiles: false,
maxInstances: 10,
chromeOptions: {
'mobileEmulation': {
'deviceName': 'Apple iPhone 4'
},
args: [
'incognito',
'disable-extensions'
]
},
loggingPrefs: {
browser: 'ALL'
},
specs: ['app/**/*.mobile.spec.js']
},
{
browserName: 'chrome',
specs: ['!app/**/*.mobile.spec.js']
}
]
module.exports.config = config;
I'd like Protractor E2E tests to reflect my code coverage in SonarQube.
I've tried grunt-protractor-coverage npm module but it shows 100% coverage while the report file it creates is empty.
Here's the relevant part of my Gruntfile.js:
connect: {
options: {
port: 9000,
hostname: 'localhost'
},
runtime: {
options: {
base: 'instrumented/build'
}
}
},
instrument: {
files: 'build/**/*.js',
options: {
lazy: true,
basePath: "instrumented"
}
},
protractor_coverage: {
options: {
keepAlive: true,
noColor: false,
coverageDir: 'coverage',
args: {
baseUrl: 'http://localhost:9000'
}
},
local: {
options: {
configFile: './protractor-chrome-conf.js'
}
}
},
makeReport: {
src: 'coverage/*.json',
options: {
type: 'lcov',
dir: 'coverage/dir',
print: 'detail'
}
}
Any ideas?
You must first install the SonarJS code analyzer
And then this plugin can be fed with a LCOV report providing the coverage information: http://docs.sonarqube.org/display/PLUG/JavaScript+Coverage+Results+Import