I can't get sass sourcemaps to work, i set this in gulpfile:
Sass task snippet form Gulpfile:
gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.rubySass({
style: 'expanded',
precision: 10,
sourcemap: true
}))
.pipe($.autoprefixer('last 1 version'))
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream:true}))
.pipe($.size());
});
The main.css.map file actually generates under .tmp/styles next to main.css, but it does not gets read by the browser. I am using the generator-gulp-webapp form yeoman with BrowserSync.
BrowserSync snippet from gulpfile:
gulp.task('serve', ['styles'], function () {
browserSync.init(null, {
server: {
baseDir: ['app', '.tmp'],
directory: true
},
debugInfo: false,
open: false,
host: "localhost"
}, function (err, bs) {
require('opn')(bs.options.url);
console.log('Started connect web server on ' + bs.options.url);
});
});
Related
I've got some issues with codeceptjs appium.
I run test script by npx codeceptjs run , it did not execute the step_definitions file.
I config steps definition with /*steps.js and its not working, i have to direct exact path of steps file.
The app crashed without throw exception, the script still being execute.
add-task.feature
Feature: Add task
Background: I opened the application
Scenario: Add task
Given I click Add Task button
And I input all information
add-task-steps.js
When("I input all information", () => {
AddTaskScreen.inputTaskName('sdsada')
});
const HomeScreen = require("../screens/home-screen.js")
const { I } = inject();
home-screen-steps.js
Given("I click Add Task button", () => {
HomeScreen.tapAddTaskButton();
});
Details
CodeceptJS version: ^3.3.6
NodeJS Version: 8.15.0
Operating System: Windows 10
webdriverio 7.25.2
Configuration file:
exports.config = {
output: './output',
helpers: {
Appium: {
app: 'Appium/ToDoList.apk',
platform: 'Android',
device: 'emulator-5556'
}
},
include: {
I: './steps_file.js',
env:{
TIMEOUT: 5000,
}
},
mocha: {},
bootstrap: null,
timeout: null,
teardown: null,
hooks: [],
gherkin: {
features: './features/*.feature',
steps: ['./step_definitions/home-screen-steps.js']
},
plugins: {
screenshotOnFail: {
enabled: true
},
tryTo: {
enabled: true
},
retryFailedStep: {
enabled: false
},
retryTo: {
enabled: true
},
eachElement: {
enabled: true
},
pauseOnFail: {}
},
stepTimeout: 10000,
stepTimeoutOverride: [{
pattern: 'wait.*',
timeout: 0
},
{
pattern: 'amOnPage',
timeout: 0
}
],
tests: './*_test.js',
name: 'appium'
}
Thanks in advance. <3
I resolved it by replace waitForElementToBeClickable with waitForElement.
Idk why Codeceptjs not recognize waitForElementToBeClickabe and also not throw any exception.
I'm developing a Django+Vue app using VSCode devcontainers (Docker).
I have recently migrated from Vue CLI v4 to Vue CLI v5 following the migration guide.
After the migration, the HMR of the dev-server stopped working.
This was my vue.config.js before the migration:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: process.env.NODE_ENV === "development" ? "http://localhost:8080/" : "/static/",
devServer: {
host: "0.0.0.0",
port: 8080,
public: "0.0.0.0:8080",
https: false,
headers: { "Access-Control-Allow-Origin": ["*"] },
hotOnly: true,
watchOptions: {
ignored: "./node_modules/",
aggregateTimeout: 300,
poll: 1000,
},
},
transpileDependencies: ["vuetify"],
css: {
sourceMap: true,
},
chainWebpack: (config) => {
config.plugin("BundleTracker").use(BundleTracker, [
{
filename: `./config/webpack-stats-${process.env.NODE_ENV}.json`,
},
]);
config.resolve.alias.set("__STATIC__", "static");
},
};
And after:
const { defineConfig } = require("#vue/cli-service");
const BundleTracker = require("webpack-bundle-tracker");
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === "development" ? "http://localhost:8080/" : "/static/",
devServer: {
host: "0.0.0.0",
port: 8080,
client: {
webSocketURL: "auto://0.0.0.0:8080/ws",
},
https: false,
headers: { "Access-Control-Allow-Origin": ["*"] },
hot: "only",
static: {
watch: {
ignored: "./node_modules/",
aggregateTimeout: 300,
poll: 1000,
},
},
},
transpileDependencies: ["vuetify"],
css: {
sourceMap: true,
},
chainWebpack: (config) => {
config.plugin("BundleTracker").use(BundleTracker, [
{
filename: `./config/webpack-stats-${process.env.NODE_ENV}.json`,
},
]);
config.resolve.alias.set("__STATIC__", "static");
},
});
After the migration, a new warning shows everytime I run npm run serve (but devServer.public has been removed in v5!):
App running at:
- Local: http://localhost:8080/
It seems you are running Vue CLI inside a container.
Since you are using a non-root publicPath, the hot-reload socket
will not be able to infer the correct URL to connect. You should
explicitly specify the URL via devServer.public.
Access the dev server via http://localhost:<your container's external mapped port>http://localhost:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
Any ideas?
Thanks in advance!
My team had similar issues as you are describing. We could fix it by adding the optimization object to our Webpack config (vue.config.js`).
const {defineConfig} = require('#vue/cli-service');
module.exports = defineConfig({
/* your config */
configureWebpack: {
optimization: {
runtimeChunk: 'single',
},
},
devServer: {
// we need this for apollo to work properly
proxy: `https://${process.env.SANDBOX_HOSTNAME}/`,
host: '0.0.0.0',
allowedHosts: 'all',
},
});
The optimization part fixed the HMR for us. However, if you're using Firefox, your console might still be spammed by error messages like these:
The connection to wss://SANDBOX_HOSTNAME:8080/ws was interrupted while
the page was loading.
This has been a blocker of vue 3 for us, so I hope it helps. ✌️
When I trying run test in Microsoft edge
browser starting and page is loading, but then I got error :
TypeError: Error while running "waitForElementVisible" command: Error while trying to create HTTP request for "/wd/hub/session/8bf67432a94d18e24f88493fd249c629/element/[object Object]/displayed": Request path contains unescaped characters
For Chrome and Firefox test works fine
Test code
module.exports = {
'Demo test Ecosia.org': function (browser) {
browser
.url('https://www.ecosia.org/')
.waitForElementVisible('body')
.assert.titleContains('Ecosia')
.assert.visible('input[type=search]')
.setValue('input[type=search]', 'nightwatch')
.assert.visible('button[type=submit]')
.click('button[type=submit]')
.assert.containsText('.mainline-results', 'Nightwatch.js')
.end();
}
};
My nightwatch.conf.js
const seleniumServer = require('selenium-server');
const edgeDriver = require('edgedriver');
const chromeDriver = require('chromedriver');
const geckoDriver = require('geckodriver');
module.exports = {
src_folders: ['tests'],
custom_commands_path: '',
custom_assertions_path: '',
page_objects_path: '',
globals_path: '',
live_output: false,
disable_colors: false,
parallel_process_delay: 10,
"test_workers": {
"enabled": false,
"workers": "auto"
},
selenium: {
start_process: true,
//start_session: false,
server_path: seleniumServer.path,
check_process_delay: 5000,
host: '127.0.0.1',
port: 4144,
cli_args: {
"webdriver.ie.driver": ieDriver.path,
"webdriver.chrome.driver": chromeDriver.path,
"webdriver.gecko.driver": geckoDriver.path,
"webdriver.edge.driver": "node_modules/edgedriver_win64/msedgedriver.exe"
}
},
test_settings: {
skip_testcases_on_fail: false,
end_session_on_fail: false,
default: {
desiredCapabilities: {
browserName: 'chrome',
}
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
w3c: false,
args: ['disable-gpu']
}
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true,
marionette: true,
}
},
edge: {
desiredCapabilities: {
browserName: 'MicrosoftEdge',
javascriptEnabled: true,
acceptSslCerts: true
}
},
}
};
As you're using the new Edge which is based on chromium, I think you can refer to the same setting of Chrome.
The same error occurs when using Chrome can be fixed by adding "w3c": false. So you could add the following line to fix issue in Edge Chromium:
edgeOptions: { "w3c": false }
Reference link: TypeError ERR_UNESCAPED_CHARACTERS on testing Vue project using Nightwatch
This may be self-evident but I'm not finding any example that informs what I'm trying to do (maybe I'm just doing it wrong). I'm adding Vue to an existing ASP.NET Core MVC application and adding the JavaScript statements directly to the page works but when I try to migrate to a TypeScript file nothing happens.
The JavaScript is:
new Vue({
el: "#productPage",
data: {
isLoading: true
},
methods: {
},
mounted () {
console.log("mounted()");
this.isLoading = false;
}
});
This works as expected. Migrating the code to a TypeScript file productPage.ts:
import Vue from 'vue';
new Vue({
el: "#productPage",
data: {
isLoading: true
},
methods: {
},
mounted () {
console.log("mounted()");
this.isLoading = false;
}
});
Which generates:
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "vue"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vue_1 = require("vue");
var HonestyBox;
(function (HonestyBox) {
new vue_1.default({
el: "#productPage",
data: {
isLoading: true
},
methods: {},
mounted: function () {
console.log("Mounted !!!!");
this.isLoading = false;
}
});
})(HonestyBox || (HonestyBox = {}));
});
//# sourceMappingURL=productPage.js.map
And including the generated javascript file productPage.js:
<script src="~/js/productPage.js"></script>
This does nothing. Stepping through the debugger neither of the conditions in function(factory) are satisfied. The console tells me You are running Vue in development mode. but the included JavaScript fails to run. The tsconfig.json used to generate the JavaScript file:
{
"compileOnSave": true,
"compilerOptions": {
"module": "umd",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outDir": "wwwroot/js"
},
"include": [
"Typescript/**/*"
],
"exclude": [
"node_modules",
"wwwroot"
]
}
Using "module": "commonjs" results in ReferenceError: exports is not defined. I was hoping to avoid having to use Browserify or Webpack.
If I understand you correctly you add Vue in a separate script tag before your productPage.js.
This means that you can't import Vue in your TypeScript file, but you need to declare Vue so the module just assumes that Vue has been loaded already (outside of your TS module).
declare const Vue; // this replaces your Vue import statement
If you want to add a bundler later on, you need to remove your script tag which loads Vue and only go the modular approach:
Vue needs to be imported with an import statement so the bundler knows that he has to include all of Vue.
You will then have one single JS file (or if your bundler splits it: multiple JS files).
i have a problem with hashes in vue cli build.
And now to the details.
I build my app, and in dist folder i see my files with names like
app.dsadas.js, chunk-1-dsadaas.js etc.. all looks good.
But i build my app in docker images, there may be 2 or more, and i need all this images with the same hashes in filenames, but it is not.
This 'webpack-md5-hash' plugin helped me with this problem, but its very old solution, works with warnings.
Help pls find solution for webpack 4.
This is my vue config file:
const path = require('path');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
function resolve(dir) {
return path.resolve(__dirname, dir);
}
module.exports = {
assetsDir: 'static',
runtimeCompiler: true,
lintOnSave: process.env.NODE_ENV !== 'production',
devServer: {
overlay: {
warnings: true,
errors: true,
},
},
configureWebpack: {
performance: {
hints: false,
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'#': resolve('src'),
utils: resolve('src/utils'),
api: resolve('src/api'),
defaultStates: resolve('src/store/modules/defaultStates'),
router: resolve('src/router'),
store: resolve('src/store'),
config: resolve('src/config'),
helpers: resolve('src/store/modules/helpers'),
constants: resolve('src/constants'),
mixins: resolve('src/mixins'),
},
},
plugins: [
new VuetifyLoaderPlugin(),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
threshold: 10240,
minRatio: 0.8,
}),
],
},
};