Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use useCssModule method in Playwright Internal
Best JavaScript code snippet using playwright-internal
style.js
Source:style.js 
1const path = require('path')2const ExtractTextPlugin = require('extract-text-webpack-plugin')3const getCacheDirectory = require('../../utils/helpers/getCacheDirectory')4const __cache__loader__directory = getCacheDirectory('cache-loader')5const emitFilename = '[name].[chunkhash:6].css'6const [extractLibStyle, extractVendorStyle, extractProjectStyle] = [7 new ExtractTextPlugin(`lib/${emitFilename}`),8 new ExtractTextPlugin(`vendor/${emitFilename}`),9 new ExtractTextPlugin({10 filename: `project/${emitFilename}`11 // allChunks: true12 })13]14const getExtractLoader = (15 extracter,16 { type = 'css', fallback = 'style-loader', useCssModule = false } = {}17) =>18 extracter.extract({19 fallback,20 publicPath: '../',21 use: [22 {23 loader: 'cache-loader',24 options: {25 cacheDirectory: __cache__loader__directory26 }27 },28 {29 loader: 'css-loader',30 options: {31 minimize: false,32 ...(useCssModule33 ? {34 modules: true,35 localIdentName: '[local]_[hash:base64:4]'36 }37 : {})38 }39 },40 'postcss-loader',41 ...{42 sass: ['sass-loader'],43 css: []44 }[type]45 ]46 })47module.exports = {48 plugins: [extractLibStyle, extractVendorStyle, extractProjectStyle],49 module: {50 rules: [51 // --------------------------- å¤ç Lib æ ·å¼æ件 -----------------------------------52 {53 test: /.*node_modules.*antd-mobile.*\.less$/,54 use: extractLibStyle.extract([55 // 'thread-loader',56 {57 loader: 'cache-loader',58 options: {59 cacheDirectory: __cache__loader__directory60 }61 },62 'css-loader?minimize=false',63 {64 loader: 'postcss-loader',65 options: {66 sourceMap: true,67 plugins: [68 require('postcss-px-to-viewport')({69 viewportWidth: 720, // è§çªç宽度ï¼å¯¹åºçæ¯æ们设计稿ç宽度ï¼ä¸è¬æ¯750ï¼æ¤å¤ä¸º72070 // viewportHeight: 1280, // è§çªçé«åº¦ï¼æ ¹æ®720设å¤ç宽度æ¥æå®ï¼ä¸è¬æå®1334ï¼ä¹å¯ä»¥ä¸é
ç½®71 unitPrecision: 3, // æå®`[pt]`转æ¢ä¸ºè§çªåä½å¼çå°æ°ä½æ°ï¼å¾å¤æ¶åæ æ³æ´é¤ï¼72 viewportUnit: 'vw', // æå®éè¦è½¬æ¢æçè§çªåä½ï¼å»ºè®®ä½¿ç¨vw73 selectorBlackList: [], // æå®ä¸è½¬æ¢ä¸ºè§çªåä½çç±»ï¼å¯ä»¥èªå®ä¹ï¼å¯ä»¥æ éæ·»å ,建议å®ä¹ä¸è³ä¸¤ä¸ªéç¨çç±»å74 minPixelValue: 1, // å°äºæçäº`0[pt]`ä¸è½¬æ¢ä¸ºè§çªåä½ï¼ä½ ä¹å¯ä»¥è®¾ç½®ä¸ºä½ æ³è¦çå¼75 mediaQuery: false // å
许å¨åªä½æ¥è¯¢ä¸è½¬æ¢`[pt]`76 })77 ]78 }79 },80 {81 loader: 'less-loader',82 options: {83 javascriptEnabled: true,84 modifyVars: require('../../utils/antd-mobile/theme')85 }86 }87 ])88 },89 {90 test: /.*node_modules.*\.less$/,91 exclude: [/antd-mobile/],92 use: extractLibStyle.extract([93 // 'thread-loader',94 {95 loader: 'cache-loader',96 options: {97 cacheDirectory: __cache__loader__directory98 }99 },100 'css-loader?minimize=false',101 'less-loader?javascriptEnabled'102 ])103 },104 {105 test: /.*node_modules.*\.css$/,106 use: extractLibStyle.extract(['css-loader?minimize=false'])107 },108 // --------------------------- å¤ç Lib æ ·å¼æ件 -----------------------------------109 // --------------------------- å¤ç Vendor æ ·å¼æ件 --------------------------------110 {111 test: /.*src.*vendor.*\.css$/,112 exclude: /\.m\.css$/,113 use: getExtractLoader(extractVendorStyle)114 },115 {116 test: /.*src.*vendor.*\.(scss|sass)$/,117 exclude: /\.m\.(scss|sass)$/,118 use: getExtractLoader(extractVendorStyle, { type: 'sass' })119 },120 {121 test: /.*src.*vendor.*\.m\.css$/,122 use: getExtractLoader(extractVendorStyle, { useCssModule: true })123 },124 {125 test: /.*src.*vendor.*\.m\.(scss|sass)$/,126 use: getExtractLoader(extractVendorStyle, {127 type: 'sass',128 useCssModule: true129 })130 },131 // --------------------------- å¤ç Vendor æ ·å¼æ件 --------------------------------132 // --------------------------- å¤ç Project / Prefix æ ·å¼æ件 ----------------------133 {134 test: /.*src.*(project|__prefix__).*\.css$/,135 exclude: /\.m\.css$/,136 use: getExtractLoader(extractProjectStyle)137 },138 {139 test: /.*src.*(project|__prefix__).*\.(scss|sass)$/,140 exclude: /\.m\.(scss|sass)$/,141 use: getExtractLoader(extractProjectStyle, { type: 'sass' })142 },143 {144 test: /.*src.*(project|__prefix__).*\.m\.css$/,145 use: getExtractLoader(extractProjectStyle, { useCssModule: true })146 },147 {148 test: /.*src.*(project|__prefix__).*\.m\.(scss|sass)$/,149 use: getExtractLoader(extractProjectStyle, {150 type: 'sass',151 useCssModule: true152 })153 }154 // --------------------------- å¤ç Project / Prefix æ ·å¼æ件 -----------------------155 ]156 },157 vue: {158 loaders: {159 scss: getExtractLoader(extractProjectStyle, {160 type: 'sass',161 fallback: 'vue-style-loader'162 }),163 sass: getExtractLoader(extractProjectStyle, {164 type: 'sass',165 fallback: 'vue-style-loader'166 }),167 css: getExtractLoader(extractProjectStyle, {168 fallback: 'vue-style-loader'169 }),170 postcss: getExtractLoader(extractProjectStyle, {171 fallback: 'vue-style-loader'172 })173 }174 }...
module-rules.js
Source:module-rules.js
1const miniCssExtract = require('mini-css-extract-plugin');2const postcssImport = require('postcss-import');3const postcssPresetEnv = require('postcss-preset-env');4const cssnano = require('cssnano');5const pix2rem = require('postcss-pxtorem');6const sass = require('sass');7const threadLoader = require('thread-loader');8/** options: isDev, useCssModule */9const getCssLoaders = (options) => {10 return [11 // cache-loader å¨å¤§å¼éloadersæå¼å¯ï¼å¦åå ä¹æ æ§è½æå12 // webpack5 ä¸ä½¿ç¨ cache é
ç½®13 // {14 // loader: 'cache-loader',15 // },16 // thread-loader æ æ³å lessãsassä¸èµ·ä½¿ç¨ï¼åç§æ¥é17 {18 loader: options.isDev ? 'style-loader' : miniCssExtract.loader,19 },20 {21 loader: 'css-loader',22 options: {23 modules: !!options.useCssModule,24 },25 },26 {27 loader: 'postcss-loader',28 options: {29 postcssOptions: (loaderContext) => {30 const targetPlugins = [31 postcssImport(),32 // pix2rem({ propList: ['*'], rootValue: 100, exclude: /node_modules/i }),33 postcssPresetEnv(),34 ];35 if (!options.isDev) {36 targetPlugins.push(cssnano());37 }38 return {39 plugins: targetPlugins,40 };41 },42 },43 },44 ].filter((item) => item);45};46module.exports = (isServer, isDev) => {47 // threadLoaderé¢ç48 const workerPool = { poolTimeout: isDev ? Infinity : 2000 };49 threadLoader.warmup(workerPool, ['babel-loader']);50 return [51 {52 test: /\.(ts|tsx)$/,53 include: /node_modules(\/|\\)(\@thyiad(\/|\\)antd-ui).*/,54 use: {55 loader: 'ts-loader',56 options: { allowTsInNodeModules: true },57 },58 },59 {60 test: /\.(js|jsx|ts|tsx)$/,61 exclude: /node_modules/,62 use: [63 // {64 // loader: 'cache-loader',65 // },66 {67 loader: 'thread-loader',68 options: workerPool,69 },70 {71 loader: 'babel-loader',72 options: {73 cacheDirectory: true,74 },75 },76 ],77 },78 {79 test: /\.css$/,80 use: isServer ? 'null-loader' : getCssLoaders({ useCssModule: false, isDev: isDev }),81 },82 {83 test: /\.scss$/,84 exclude: /node_modules/,85 use: isServer86 ? 'null-loader'87 : [88 ...getCssLoaders({ useCssModule: false, isDev: isDev }),89 {90 loader: 'sass-loader',91 options: {92 implementation: sass,93 },94 },95 ],96 },97 {98 test: /\.less$/,99 include: /node_modules/,100 use: isServer101 ? 'null-loader'102 : [103 ...getCssLoaders({ useCssModule: false, isDev: isDev }),104 {105 loader: 'less-loader',106 options: {107 lessOptions: {108 javascriptEnabled: true,109 },110 },111 },112 ],113 },114 {115 test: /\.less$/,116 exclude: /node_modules/,117 use: isServer118 ? 'null-loader'119 : [120 ...getCssLoaders({ useCssModule: true, isDev: isDev }), // å¦ææ¬å°ä¸éè¦css modules, å¯ä»¥å并为åä¸ä¸ªlessé
置项121 {122 loader: 'less-loader',123 options: {124 lessOptions: {125 javascriptEnabled: true,126 },127 },128 },129 ],130 },131 {132 test: /\.(png|jpg|jpeg|gif|svg)$/,133 exclude: /node_modules/,134 type: 'asset',135 parser: {136 dataUrlCondition: {137 maxSize: 5 * 1024,138 },139 },140 generator: {141 filename: 'media/[contenthash][ext][query]',142 },143 },144 {145 test: /\.(ttf|json|mp4)$/,146 exclude: /node_modules/,147 type: 'asset/resource',148 generator: {149 filename: 'media/[contenthash][ext][query]',150 },151 },152 ];...
tiles.css.js
Source:tiles.css.js
1const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');2const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');3const env = require('./env');4function styleResolveLoaders({5 postCssPlugins = null,6 useExtract = true,7 useCssModule,8 useSassLoader,9} = {}) {10 const IS_PROD = env.modeIs('prod');11 const sourceMapOptions = !IS_PROD ? { sourceMap: true } : {};12 const cssExtractor = [13 {14 loader: 'cache-loader', // 对æ½ç¦»cssæ件åï¼å°css-loader产ççç»æç¼åå°cache-loader15 options: {16 cacheDirectory: env.get('CACHE_DIR'),17 },18 },19 {20 loader: 'css-loader',21 options: {22 esModule: true,23 // ...sourceMapOptions,24 modules: useCssModule25 ? {26 mode: 'local', // css模åé»è®¤local27 localIdentName: !IS_PROD ? '[path][name]__[local]' : '[hash:base64:5]', // å¼åç¯å¢ä½¿ç¨åæ¥çåå28 }29 : false,30 importLoaders: postCssPlugins ? 1 : 0, // if use postcssï¼ need importLoaders31 },32 },33 ];34 if (postCssPlugins) {35 // hippyä¸éè¦å postcssçåç¼36 cssExtractor.push({37 loader: 'postcss-loader',38 options: {39 plugins: postCssPlugins, // browserlistå¨packagejsonä¸40 },41 });42 }43 if (useSassLoader) {44 cssExtractor.push(45 { loader: 'resolve-url-loader', options: { ...sourceMapOptions } }, // ç¨æ¥è§£æsassä¸@importå¼ç¨å¾çèµæºçä½ç½®é®é¢46 {47 loader: 'sass-loader',48 options: {49 ...sourceMapOptions,50 },51 }52 );53 if (useExtract) {54 cssExtractor.unshift({55 loader: ExtractCssChunks.loader,56 options: { hmr: !!env.isWds },57 });58 }59 }60 return cssExtractor;61}62module.exports = ({63 useCssModule = false,64 cssModulePaths, // default will enable .module.css witch css module65 useSass = true,66 postCssPlugins = null,67} = {}) => {68 if (useCssModule) {69 // eslint-disable-next-line no-param-reassign70 cssModulePaths = /\.module\.css$/; // setDefault css module path71 }72 if (env.targetIs('server')) {73 // in server74 return {75 module: {76 rules: [77 { test: /\.css$/, use: 'ignore-loader' },78 { test: /\.s[a|c]ss$/i, use: 'ignore-loader' },79 {80 rules: [81 {82 test: /\.css$/i,83 use: styleResolveLoaders({ useCssModule: true, useExtract: false, postCssPlugins }),84 include: cssModulePaths,85 },86 {87 test: /\.css$/i,88 use: 'ignore-loader',89 exclude: cssModulePaths,90 },91 // éè¿includeåexcludeé
å产çç¸æ¥çå è½½cssModuleçè§åï¼ä¿è¯è¿å
¥å°ä¸åçloaderä¸92 useSass && {93 test: /\.(scss|sass)$/,94 use: styleResolveLoaders({95 useCssModule: true,96 useSassLoader: true,97 useExtract: false,98 postCssPlugins,99 }),100 include: cssModulePaths,101 },102 useSass && {103 test: /\.(scss|sass)$/,104 use: 'ignore-loader',105 exclude: cssModulePaths,106 },107 ].filter((r) => !!r),108 },109 ],110 },111 };112 }113 const IS_PROD = env.modeIs('prod');114 return {115 module: {116 rules: [117 {118 test: /\.css$/i,119 use: styleResolveLoaders({ useCssModule: true, postCssPlugins }),120 include: cssModulePaths,121 },122 {123 test: /\.css$/i,124 use: styleResolveLoaders({ useCssModule: false, postCssPlugins }),125 exclude: cssModulePaths,126 },127 // éè¿includeåexcludeé
å产çç¸æ¥çå è½½cssModuleçè§åï¼ä¿è¯è¿å
¥å°ä¸åçloaderä¸128 useSass && {129 test: /\.(scss|sass)$/,130 use: styleResolveLoaders({ useCssModule: true, useSassLoader: true, postCssPlugins }),131 include: cssModulePaths,132 },133 useSass && {134 test: /\.(scss|sass)$/,135 use: styleResolveLoaders({ useCssModule: false, useSassLoader: true, postCssPlugins }),136 exclude: cssModulePaths,137 },138 ].filter((r) => !!r),139 },140 plugins: [141 new ExtractCssChunks({142 filename: IS_PROD ? '[name].[contenthash].css' : '[name].css',143 }),144 IS_PROD &&145 new OptimizeCssAssetsPlugin(/* { cssnanoçé项ï¼å¦ésourcemapæå¼è¿ä¸ª146 cssProcessorOptions: {147 map: { inline: false }148 },149 } */),150 ].filter((item) => !!item),151 };...
util.js
Source:util.js
1const path = require('path');2const fs = require('fs');3const glob = require('glob');4const MiniCssExtractPlugin = require('mini-css-extract-plugin');5const autoprefixer = require('autoprefixer');6const HtmlWebpackPlugin = require('html-webpack-plugin');7const os = require('os');8// pages/name/index.js9function getEntry() {10 let entry = {};11 const entryFilePathList = glob.sync(path.resolve(__dirname, '../src/pages/*/index.js'));12 for (const path of entryFilePathList) {13 let htmlPath = path.replace('.js', '.html');14 if (fs.existsSync(htmlPath)) {15 const pageName = path.match(/src\/pages\/(.+)\/index.js/)[1];16 const relativePath = `${pageName}/index`;17 entry[relativePath] = path; // è¾åºjsæç
§æ件夹åå¼18 }19 }20 return entry;21}22// pages/name/index.html23function getHtmlPlugins(isDev) {24 const htmlPathList = glob.sync(path.resolve(__dirname, '../src/pages/*/index.html'));25 return htmlPathList.map((htmlFilepath) => {26 const pageName = htmlFilepath.match(/src\/pages\/(.+)\/index.html/)[1];27 let fileName = `../pages/${pageName}.html`;28 if (isDev) {29 fileName = `./pages/${pageName}.html`;30 }31 let option = {32 template: path.resolve(__dirname, `../src/pages/${pageName}/index.html`),33 filename: fileName, // filename ç¸å¯¹çé½æ¯output.path34 chunks: [`${pageName}/index`], // æåªäºjsç¨scriptå¼å
¥35 inject: true,36 minify: {37 html5: true,38 collapseWhitespace: true,39 preserveLineBreaks: false,40 minifyCSS: true,41 minifyJS: true,42 removeComments: false43 }44 };45 let jsPath = htmlFilepath.replace('.html', '.js');46 if (!fs.existsSync(jsPath)) {47 option.chunks = [];48 }49 return new HtmlWebpackPlugin(option);50 });51}52function getCssLoader(isDev, useCssModule) {53 let modules = false;54 if (useCssModule) {55 modules = {56 localIdentName: '[local]--[hash:base64:5]'57 };58 }59 let value = [60 {61 loader: 'css-loader',62 options: {63 importLoaders: 1, // å½cssæ件ä¸åæå¼å
¥äºå
¶ä»çcssçæ¶åï¼éè¦è®¾ç½®ä¸ä¸importLoaders64 modules65 }66 },67 {68 loader: 'postcss-loader',69 options: {70 plugins: [71 autoprefixer({72 overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']73 })74 ]75 }76 }77 ];78 if (isDev) {79 value.unshift('style-loader');80 } else {81 value.unshift(MiniCssExtractPlugin.loader);82 }83 return value;84}85function getLessLoader(isDev, useCssModule) {86 let lessLoader = getCssLoader(isDev, useCssModule);87 lessLoader = lessLoader.concat(['less-loader']);88 return lessLoader;89}90function getCssRule(isDev) {91 const cssLoaderNoModule = getCssLoader(isDev);92 const cssLoaderWidthModule = getCssLoader(isDev, true);93 return {94 test: /\.css$/,95 oneOf: [96 {97 resourceQuery: /css_modules/, // foo.css?css_modules98 use: cssLoaderWidthModule99 },100 {101 use: cssLoaderNoModule102 }103 ]104 };105}106function getLessRule(isDev) {107 const lessLoaderNoModule = getLessLoader(isDev);108 const lessLoaderWithModule = getLessLoader(isDev, true);109 return {110 test: /\.less/,111 oneOf: [112 {113 resourceQuery: /css_modules/, // foo.css?css_modules114 use: lessLoaderWithModule115 },116 {117 use: lessLoaderNoModule118 }119 ]120 };121}122function recursiveIssuer(m) {123 if (m.issuer) {124 return recursiveIssuer(m.issuer);125 } else if (m.name) {126 return m.name;127 } else {128 return false;129 }130}131function getCssCacheGroups() {132 let value = {};133 let entry = getEntry();134 // eslint-disable-next-line guard-for-in135 for (const entryName in entry) {136 const pageName = entryName.split(/[\\/]/)[0];137 value[pageName] = {138 name: pageName,139 test: (m, c, entry = entryName) =>140 m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,141 chunks: 'all',142 enforce: true143 };144 }145 return value;146}147// é»è¾æ ¸å¿148function getCpuCoreCount() {149 return os.cpus().length;150}151module.exports = {152 getEntry,153 getHtmlPlugins,154 getCssRule,155 getLessRule,156 getCssCacheGroups,157 getCpuCoreCount...
webpack.config.js
Source:webpack.config.js
1const path = require('path')2const webpack = require('webpack')3const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');4const HtmlWebpackPlugin = require('html-webpack-plugin');5const srcPath = path.resolve(__dirname,'src')6const distPath = path.resolve(__dirname,'dist')7module.exports = {8 mode:'development',9 entry:'./src/main.js',10 output:{11 filename:'bundle.js',12 path:distPath13 },14 devtool:'eval-cheap-module-source-map',15 module:{16 rules:[17 {18 test:/\.jsx?$/,19 exclude: /(node_modules|src\/libs)/,20 include:srcPath,21 loader:"babel-loader",22 options:{23 // cacheDirectory:true24 25 }26 },27 {28 test:/\.css$/,29 include:srcPath,30 use:styleLoaderConfig()31 },32 {33 test: /\.less$/,34 resource: path.resolve(__dirname,'src/index.less'),35 use:styleLoaderConfig({ useCssModule: false })36 },37 {38 test: /\.less$/,39 include: /(src\/pages|src\/components|src\/containers)/,40 use: styleLoaderConfig({ useCssModule: true }),41 exclude: /(node_modules)/42 },43 ]44 },45 plugins:[46 new ReactRefreshWebpackPlugin(),47 new HtmlWebpackPlugin({48 template: './public/index.html',49 }),50 // new HtmlWebpackPlugin({51 // template: './public/index.html',52 // favicon: './public/favicon.ico',53 // filename: 'index.html',54 // title: 'webpack5.0',55 // inject: 'body',56 // // minify: {57 // // minifyJS: true,58 // // minifyCSS: true,59 // // removeComments: true,60 // // collapseWhitespace: true,61 // // removeAttributeQuotes: true62 // // }63 // }),64 // new MiniCssExtractPlugin({65 // filename: filesNameMapper.cssFilename,66 // chunkFilename: filesNameMapper.cssChunkFilename67 // }),68 ],69 devServer:{70 overlay: {//å½åºç°ç¼è¯å¨é误æè¦åæ¶ï¼å°±å¨ç½é¡µä¸æ¾ç¤ºä¸å±é»è²çèæ¯å±åé误信æ¯71 errors: true72 },73 contentBase:distPath,74 hot:true75 },76 performance: {77 hints: false, 78 },79 cache: true,80}81function styleLoaderConfig(options={}) {82 const useCssModule = options.useCssModule || false;83 return [84 // isDev 85 // ?'style-loader' 86 // : MiniCssExtractPlugin.loader,87 'style-loader',88 // {89 // loader: 'cache-loader',90 // options: {91 // cacheDirectory: path.join(cachePath, 'csscache')92 // }93 // },94 {95 loader: 'css-loader',96 options: {97 // importLoaders: 2,98 modules: useCssModule,99 // localIdentName: '[local]--[hash:base64:4]'100 }101 },102 // {103 // loader: 'postcss-loader',104 // options: {105 // config: {106 // path: path.join(__dirname, 'postcss.config.js'),107 // ctx: {108 // autoprefixer: {109 // browsers: ['Safari >= 10', 'last 1 firefox version', 'Chrome >= 62', 'Explorer >= 10']110 // },111 // cssnano: { preset: 'default' },112 // cssVariables: {}113 // }114 // }115 // }116 // },117 {118 loader: 'less-loader',119 options: {120 // javascriptEnabled: true,121 // modifyVars: {122 // '@primary-color': '#00c3c1',123 // '@link-color': '#00c3c1'124 // }125 }126 }127 ];...
index.js
Source:index.js
1import { createRouter, createWebHashHistory } from 'vue-router'2<<<<<<< HEAD3const HelloWorld = () => import(/* webpackChunkName: "HelloWorld" */ "../views/HelloWorld.vue");4const LiveCycle = () => import(/* webpackChunkName: "LiveCycle" */ "../views/LiveCycle.vue");5const TodoList = () => import(/* webpackChunkName: "TodoList" */ "../views/TodoList.vue");6const VuexShow = () => import(/* webpackChunkName: "VuexShow" */ "../views/VuexShow.vue");7const PluginShow = () => import(/* webpackChunkName: "PluginShow" */ "../views/PluginShow.vue");8const Watch = () => import(/* webpackChunkName: "Watch" */ "../views/Watch.vue");9// const SrcHtml = () => import(/* webpackChunkName: "SrcHtml" */ "../views/SrcHtml.vue");10const UseCssModule = () => import(/* webpackChunkName: "UseCssModule" */ "../views/UseCssModule.vue");11=======12const HelloWorld = () =>13 import(/* webpackChunkName: "HelloWorld" */ '../views/HelloWorld.vue')14const LiveCycle = () =>15 import(/* webpackChunkName: "LiveCycle" */ '../views/LiveCycle.vue')16const TodoList = () =>17 import(/* webpackChunkName: "TodoList" */ '../views/TodoList.vue')18const VuexShow = () =>19 import(/* webpackChunkName: "VuexShow" */ '../views/VuexShow.vue')20const PluginShow = () =>21 import(/* webpackChunkName: "PluginShow" */ '../views/PluginShow.vue')22const Watch = () => import(/* webpackChunkName: "Watch" */ '../views/Watch.vue')23const Reactive = () =>24 import(/* webpackChunkName: "Reactive" */ '../views/Reactive.vue')25>>>>>>> e2e97612ef429ed9d77ff25bfa06eeb3c78086fa26// å¨ Vue-routeræ°çæ¬ä¸ï¼éè¦ä½¿ç¨createRouteræ¥å建路ç±27export default createRouter({28 // æå®è·¯ç±ç模å¼,æ¤å¤ä½¿ç¨çæ¯hash模å¼29 history: createWebHashHistory(),30 // è·¯ç±å°å31 routes: [32 {33 path: '/',34 name: 'HelloWorld',35 component: HelloWorld,36 meta: {37 name: '欢è¿é¡µ-综åæ¼ç¤º',38 },39 },40 {41 path: '/reactive',42 name: 'Reactive',43 component: Reactive,44 meta: {45 name: 'Reactive æ¼ç¤º',46 },47 },48 {49 path: '/live-cycle',50 name: 'LiveCycle',51 component: LiveCycle,52 meta: {53 name: 'çå½å¨ææ¼ç¤º',54 },55 },56 {57 path: '/todo-list',58 name: 'TodoList',59 component: TodoList,60 meta: {61 name: 'ç®åtodolistæ¼ç¤º',62 },63 },64 {65 path: '/vuex-show',66 name: 'VuexShow',67 component: VuexShow,68 meta: {69 name: 'vuexæ¼ç¤º',70 },71 },72 {73 path: '/plugin-show',74 name: 'PluginShow',75 component: PluginShow,76 meta: {77 name: 'æ件æ¼ç¤º',78 },79 },80 {81 path: '/watch',82 name: 'Watch',83 component: Watch,84 meta: {85<<<<<<< HEAD86 name: 'watch æ¼ç¤º'87 }88 },89 // {90 // path: '/srcHtml',91 // name: 'SrcHtml',92 // component: SrcHtml,93 // meta: {94 // name: 'Src å¼å
¥Html'95 // }96 // },97 {98 path: '/useCssModule',99 name: 'UseCssModule',100 component: UseCssModule,101 meta: {102 name: 'cssåjsäºç¸éä¿¡'103 }104 }105 ]106=======107 name: 'watch æ¼ç¤º',108 },109 },110 ],111>>>>>>> e2e97612ef429ed9d77ff25bfa06eeb3c78086fa...
helpers.js
Source:helpers.js
1const path = require("path");2const MiniCssExtractPlugin = require("mini-css-extract-plugin");3const isEnvDevelopment = process.env.NODE_ENV === "development";4const createCSSLoader = (useCssModule) => {5 return [6 isEnvDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,7 useCssModule8 ? {9 loader: "css-loader",10 options: {11 modules: true,12 localIdentName: "[local]_[hash:base64:5]",13 },14 }15 : "css-loader",16 {17 loader: "postcss-loader",18 options: {19 config: {20 path: path.resolve(__dirname, "../postcss.config.js"),21 },22 },23 },24 ];25};26const createLessLoader = (useCssModule, extract, options = {}) => {27 return createCSSLoader(useCssModule, extract).concat({28 loader: "less-loader",29 options,30 });31};...
.prettierrc.js
Source:.prettierrc.js
1const { useCssModule } = require("vue");2useCssModule.exports = {3 singleQuote: true,4 semi: false,5 trailingComma: "none",...
Using AI Code Generation
1const { useCssModule } = require('@playwright/test');2const { expect } = require('@playwright/test');3const { test, expect } = require('@playwright/test');4const { chromium } = require('playwright');5const { firefox } = require('playwright');6const { webkit } = require('playwright');7const { devices } = require('playwright');8const { selectors } = require('playwright');9const { Locator } = require('playwright');10const { Page } = require('playwright');11const { BrowserContext } = require('playwright');12const { Browser } = require('playwright');13const { ElectronApplication } = require('playwright');14const { Worker } = require('playwright');15const { Android } = require('playwright');16const { iOS } = require('playwright');17const { BrowserType } = require('playwright');18const { Route } = require('playwright');19const { Request } = require('playwright');20const { Response } = require('playwright');21const { WebSocket } = require('playwright');22const { ConsoleMessage } = require('playwright');23const { Dialog } = require('playwright');24const { Download } = require('playwright');25const { FileChooser } = require('playwright');26const { JSHandle } = require('playwright');27const { Frame } = require('playwright');28const { ElementHandle } = require('playwright');29const { Selectors } = require('playwright');30const { TimeoutError } = require('playwright');31const { AuthOptions } = require('playwright');32const { BrowserContextOptions } = require('playwright');33const { BrowserTypeLaunchOptions } = require('playwright');34const { BrowserTypeConnectOptions } = require('playwright');35const { BrowserTypeLaunchPersistentContextOptions } = require('playwright');36const { ConsoleMessageLocation } = require('playwright');37const { DialogType } = require('playwright');38const { DownloadOptions } = require('playwright');39const { ElementHandleScreenshotOptions } = require('playwright');40const { ElementHandleBoundingBoxOptions } = require('playwright');41const { ElementHandleContentFrameOptions } = require('playwright');42const { ElementHandleEvalOptions } = require('playwright');43const { ElementHandleHoverOptions } = require('playwright');44const { ElementHandleTapOptions } = require('playwright');45const { Element
Using AI Code Generation
1const { useCssModule } = require('@playwright/test');2const { test } = useCssModule('./test.css');3const { test } = require('@playwright/test');4const { useCssModule } = test;5const { css } = useCssModule('./test.css');6const { test } = require('@playwright/test');7const { useCssModule } = test;8const { css } = useCssModule('./test.css');9test('test', async ({ page }) => {10 await page.click(css.clickMe);11});12- [Playwright Internal API](
Using AI Code Generation
1const { useCssModule } = require('playwright');2const { test, expect } = require('@playwright/test');3test('useCssModule', async ({ page }) => {4 const element = await page.$('css=header');5 expect(await element.innerText()).toContain('Playwright');6});7This method is useful when you are testing a website that uses CSS modules. For example, the Playwright website uses CSS modules. The CSS file for the website is [here](
Using AI Code Generation
1const { useCssModule } = require('@playwright/test/lib/cssParser');2const { test, expect } = require('@playwright/test');3test('useCssModule', async ({ page }) => {4 await page.setContent(`<style>5 :is(.a, .b) {6 color: red;7 }8 </style>`);9 const cssModule = await useCssModule(page);10 expect(cssModule).toEqual({11 });12});
Using AI Code Generation
1const { useCssModule } = require('@playwright/test/lib/css/cssModule');2const { test, expect } = require('@playwright/test');3test('useCssModule', async ({ page }) => {4 const css = useCssModule('test.css');5 const element = page.locator(css('logo'));6 expect(await element.getAttribute('aria-label')).toBe('Playwright');7});8const { test, expect } = require('@playwright/test');9const { useCssModule } = require('@playwright/test/lib/css/cssModule');10test('useCssModule', async ({ page }) => {11 const css = useCssModule('test.css');12 const element = page.locator(css('logo'));13 expect(await element.getAttribute('aria-label')).toBe('Playwright');14});15const { test, expect } = require('@playwright/test');16const { useCssModule } = require('@playwright/test/lib/css/cssModule');17test.fixme('useCssModule', async ({ page }) => {18 const css = useCssModule('test.css');19 const element = page.locator(css('logo'));20 expect(await element.getAttribute('aria-label')).toBe('Playwright');21});22const { test, expect } = require('@playwright/test');23const { useCssModule } = require('@playwright/test/lib/css/cssModule');24test.describe('useCssModule', () => {25 test('useCssModule', async ({ page }) => {26 const css = useCssModule('test.css');27 const element = page.locator(css('
Using AI Code Generation
1const { test, expect } = require('@playwright/test');2test('Test 1', async ({ page }) => {3 await page.click('text=Get started');4 await page.click('text=Docs');5 await page.click('text=API');6 await page.click('text=Playwright');
Using AI Code Generation
1const { useCssModule } = require('@playwright/test/lib/selectorEngine');2const { test } = require('@playwright/test');3test.describe('Test Suite', () => {4 test('Test Case', async({ page }) => {5 const cssModule = useCssModule('src/cssModule.js');6 await page.click(cssModule('button'));7 });8});9const { test } = require('@playwright/test');10test.describe('Test Suite', () => {11 test('Test Case', async({ page }) => {12 const cssModule = useCssModule('src/cssModule.js');13 await page.click(cssModule('button'));14 });15});16const { chromium } = require('playwright');17const { useCssModule } = require('@playwright/test/lib/selectorEngine');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 const cssModule = useCssModule('src/cssModule.js');23 await page.click(cssModule('button'));24 await browser.close();25})();
Using AI Code Generation
1const { useCssModule } = require('@playwright/test/lib/cssModule');2const { test } = useCssModule({3 cssFile: require.resolve('./test.css'),4});5test('My test', async ({ page }) => {6 await page.click(test('Try It'));7});8It uses [postcss](
Using AI Code Generation
1const { useCssModule } = require('@playwright/test');2const cssModule = useCssModule('./test.css');3page.click(cssModule.button);4import { PlaywrightTestConfig } from '@playwright/test';5import { useCssModule } from 'playwright-test-css-module';6const config: PlaywrightTestConfig = {7 use: {8 cssModule: useCssModule('./test.css'),9 },10};11export default config;12import { test, expect } from '@playwright/test';13import { cssModule } from '@playwright/test';14test('My test', async ({ page }) => {15 await page.click(cssModule.button);16 const text = await page.innerText(cssModule.text);17 expect(text).toBe('Hello World!');18});19import { PlaywrightTestConfig } from '@playwright/test';20import { useCssModule } from 'playwright-test-css-module';21const config: PlaywrightTestConfig = {22 use: {23 cssModule: useCssModule('./test.css'),24 },25};26export default config;27import { test, expect } from '@playwright/test';28import { cssModule } from '@playwright/test';29test('My test', async ({ page }) => {30 await page.click(cssModule.button);31 const text = await page.innerText(cssModule.text);32 expect(text).toBe('Hello World!');33});
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
