only chromium's border is visible while running test in playwright - playwright

I am using playwright to right test for our website. In playwright.config.ts I have configured to chromium browser with headless set to false. Earlier everything was working file but now while running the test the browser open but it is transparent and only border is visible. The output screenshot is also doesn't contain anything.
I am using ubuntu through wsl2 of windows 11.
The followings are still working fine with playwright:
chromium browser with headless set to true
firefox browser with either headless set to true or false
also chromium browser installed by playwright at location /xxx/xxxx/.cache/ms-playwright/chromium-1028/chrome-linux/chrome is working fine
my playwright config file is
import type { PlaywrightTestConfig } from '#playwright/test';
import dotenv from 'dotenv';
import path from 'path';
// Read from default ".env" file.
dotenv.config();
// Alternatively, read from "../my.env" file.
dotenv.config({ path: path.resolve('./my.env') });
const config: PlaywrightTestConfig = {
use: {
browserName: 'chromium',
// channel: 'chrome',
headless: false
},
webServer: {
command: ' ~/.yarn/bin/netlify dev',
port: 8888
},
testDir: './tests'
};
export default config;

Related

Antd_dayjs_vite_plugin : TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function

At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update the antd_dayjs_vite_plugin version (was 1.1.4) and now I got the same problem when I try to lunch a yarn dev as you can see :
$ yarn dev
yarn run v1.22.15
$ vite
failed to load config from vite.config.ts
error when starting dev server:
TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function [...]
Here is the code in vite.config.ts :
import reactRefresh from '#vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), antdDayjs()],
server: {
host: process.env.HOST || '127.0.0.1',
},
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
The problem also appears in antd-dayjs-vite-plugin 1.1.4 version or the 1.2.2. I also already tried to update vite to 3.1 (was in 2.5).
I don't understand the code seems to be exactly the same as the usage in the Readme package.
Thanks in advance for your help. 🙏🏻
Seams that a default export is expected by vite.js (tried to replace import statement with import {antdDayjs} from 'antd-dayjs-vite-plugin'; without success)
I was able to create a workaround using patch-package with the below steps:
modifiy node_modules/antd-dayjs-vite-plugin/dist-node/index.js
at the very end of that file, add exports.default = antdDayjs;
create a patch for antd-dayjs-vite-plugin
ensure you have the postinstall script (refer to patch-package doc)

Connection refused when launching Electron app generated with electron-packager/ electron-builder

I have a React Electron app with Webpack and try to build it into an executable.
I used the CLI commands of electron-packager and electron-builder which ran without errors.
But when I run the exe I get a blank screen and from terminal the error message:
(node:8172) electron: Failed to load URL: http://localhost:3000/main_window with error: ERR_CONNECTION_REFUSED
(Use mixmatch --trace-warnings ... to show where the warning was created)
Running with the option doesn't give any additional information.
Searching the source code for localhost leads to index.js in the webpack directory:
var createWindow = function () {
var preload = path_1.default.join(__dirname, '../renderer/main_window', "preload.js");
exports.mainWindow = new electron_1.BrowserWindow({
// show: false,
webPreferences: {
enableRemoteModule: false,
// nodeIntegration: false, // is default value after Electron v5
preload: preload // use a preload script
}
});
exports.mainWindow.loadURL('http://localhost:3000/main_window');
exports.mainWindow.maximize();
exports.mainWindow.webContents.openDevTools();
};
So I guess a server is being started, which probably is the same for every app, but the app is not allowed to access localhost.
So why does it seem to work easily for everyone else but not for me?
Once the build is created, you need to loadURL from build/index.html.
Replace your code of export.mainWindow.loadURL with this
e.g.
const isDev = require('electron-is-dev');
exports.mainWindow.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
);

Laravel 8 jetstream hot reload and browser sync do not work

I have a big problem with a system I just created.
I did the standard installation of Laravel 8 with jetstream using the docker and laravel sail...
However, I am not able to do the npm run hot or npm run watch to auto reload or browser sync...
My files are standard with laravel 8 and I haven't made any changes to the code yet.
Informations:
Laravel: v8.41.0
PHP: PHP v8.0.5
Jetstream: v2.3.5
npm: v7.7.6
NodeJS: v15.14.0
my webpack.mix.js looks like this:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
my webpack.config.js looks like this:
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
I have also tried to change the two webpacks with some information I found earlier in research, but really nothing is working, would there be a way for Hot Reload and Browser Sync to work together with Laravel Sail?
While a browsersync script is already included in app.blade.php I did not get it to work either. I removed that line and expanded my webpack.mix.js as follows:
mix.browserSync({
proxy: 'YOURDOMAIN.test',
host: 'YOURDOMAIN.test',
open: 'external'
});
Then run npm run watch- probably twice because it's going to install browsersync - and it's working.
open: 'external' save me ( same i use valet and https )
.browserSync({
proxy: 'https://app.tunnel.test',
host: 'app.tunnel.test',
open: 'external',
https: {
key: homedir + '/.config/valet/Certificates/' + domain + '.key',
cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
},
})

Rails/Webpacker and BrowserSync for CSS

I would like to use both BrowserSync features and Rails/Webpacker (with Vue and Rails 5.1). My setup is working for Javascript from webpack-dev-server.
The SCSS/CSS is compiling correctly and writing to disk.
Browser Sync reloads on HTML file changes.
How would I go about getting this working?
Rails: 3000
Browsersync: 3001
Webpack: 3035
browsersync.js
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3001,
files: ['public/packs/*.css', 'app/views/**/*', 'app/controllers/**/*'],
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3000/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
.

grails + selenium-rc plugin - cannot run sample test

I have no idea what I do wrong. I would like to use selenium-RC plugin for Grails to do some functional testing. I have created sample test using build-in script (i guess add-selenium-test), which generated (i modified it slighty):
import grails.plugins.selenium.*
import org.junit.*
import static org.junit.Assert.*
import static org.hamcrest.Matchers.*
#Mixin(SeleniumAware)
class FirstTestTests {
#Before void setUp() {
}
#After void tearDown() {
super.tearDown()
}
#Test void something() {
selenium.open "/activate"
assertTrue selenium.isTextPresent("activate")
}
}
I configured SeleniumConfig
selenium {
slow = false // true to run tests in slow resources mode
singleWindow = true // true for single window mode, false for multi-window mode
browser = "*firefox" // can include full path to executable, default value is *firefox or *iexplore on Windows
url = "http://localhost:8080" // the base URL for tests, defaults to Grails server url
defaultTimeout = 3000 // the timeout after which selenium commands will fail
windowMaximize = true // true to maximize browser on startup
screenshot {
dir = "./target/test-reports/screenshots" // directory where screenshots are placed relative to project root
onFail = true // true to capture screenshots on test failures
}
server {
host = "localhost" // the host the selenium server will run on
port = 4444 // the port the selenium server will run on
}
userExtensions = "" // path to user extensions javascript file
}
and I then I typed
grails test-app :selenium
and it seems that everything is done correctly:
INFO 19:30:08,304 RemoteWebDriver instances should connect to: http://127.0.0.1:
4444/wd/hub org.openqa.selenium.server.SeleniumServer
Starting Selenium server on port 4444 ...
INFO 19:30:08,312 Version Jetty/5.1.x org.openqa.jetty.http.HttpServer
INFO 19:30:08,315 Started HttpContext[/selenium-server/driver,/selenium-server/d
river] org.openqa.jetty.util.Container
INFO 19:30:08,318 Started HttpContext[/selenium-server,/selenium-server] org.ope
nqa.jetty.util.Container
INFO 19:30:08,321 Started HttpContext[/,/] org.openqa.jetty.util.Container
INFO 19:30:08,326 Started org.openqa.jetty.jetty.servlet.ServletHandler#55881a8f
org.openqa.jetty.util.Container
INFO 19:30:08,328 Started HttpContext[/wd,/wd] org.openqa.jetty.util.Container
INFO 19:30:08,338 Started SocketListener on 0.0.0.0:4444 org.openqa.jetty.http.S
ocketListener
INFO 19:30:08,340 Started org.openqa.jetty.jetty.Server#42aefb01 org.openqa.jett
y.util.Container
Starting Selenium session for http://localhost:8080 ...
INFO 19:30:08,502 Checking Resource aliases org.openqa.jetty.util.Credential
INFO 19:30:08,510 Command request: getNewBrowserSession[*firefox, http://localho
st:8080, ] on session null org.openqa.selenium.server.SeleniumDriverResourceHand
ler
INFO 19:30:08,512 creating new remote session org.openqa.selenium.server.Browser
SessionFactory
INFO 19:30:08,586 Allocated session 9250557308cc4886a25100eb6c5f3d7e for http://
localhost:8080, launching... org.openqa.selenium.server.BrowserSessionFactory
INFO 19:30:08,717 Preparing Firefox profile... org.openqa.selenium.server.browse
rlaunchers.FirefoxChromeLauncher
INFO 19:30:11,726 Launching Firefox... org.openqa.selenium.server.browserlaunche
rs.FirefoxChromeLauncher
The firefox window is opened, but nothing loads and nothing seems to proceed. Do I miss something?
Sounds to me like an incompatibility between the Selenium RC plugin and the current version of your web browser. You might want to dig into the plugin's dependencies and update everything to the latest versions if you're using a newer version of the browser.
We see this with Geb ( http://www.gebish.org ) when trying to run a webdriver version that is not compatible with the driver version.
Just to add, if you use Chrome and your OS is Ubuntu, then make sure you put the full path to Chrome and make sure that the executable path references chromium-browser and NOT google-chrome.
So your SeleniumConfig should look like this with the relevant line in double asterisks:
selenium {
slow = false
singleWindow = true
**browser = "*googlechrome /usr/bin/chromium-browser"**
url = null
defaultTimeout = 60000
windowMaximize = false
screenshot {
dir = "./target/test-reports/screenshots"
onFail = false
}
server {
host = "localhost"
port = 4444
}
userExtensions = ""
}

Resources