KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use sanitizeCSS method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

index.cjs

Source:index.cjs

1var postcssBrowserComments = require('postcss-browser-comments');2var Module = require('module');3var path = require('path');4var fs = require('fs');5var postcss = require('postcss');6function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }7var postcssBrowserComments__default = /*#__PURE__*/_interopDefaultLegacy(postcssBrowserComments);8var Module__default = /*#__PURE__*/_interopDefaultLegacy(Module);9var path__default = /*#__PURE__*/_interopDefaultLegacy(path);10var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);11var postcss__default = /*#__PURE__*/_interopDefaultLegacy(postcss);12const assign = (...objects) => Object.assign(...objects);13const create = (...objects) => assign(Object.create(null), ...objects);14const currentFilename = __filename;15const currentDirname = path__default['default'].dirname(currentFilename); // get resolved filenames for normalize.css16const normalizeCSS = resolve('@csstools/normalize.css');17const normalizeDir = path__default['default'].dirname(normalizeCSS);18const normalizeOpinionatedCSS = path__default['default'].join(normalizeDir, 'opinionated.css'); // get resolved filenames for sanitize.css19const sanitizeCSS = resolve('sanitize.css');20const sanitizeDir = path__default['default'].dirname(sanitizeCSS);21const sanitizeAssetsCSS = path__default['default'].join(sanitizeDir, 'assets.css');22const sanitizeFormsCSS = path__default['default'].join(sanitizeDir, 'forms.css');23const sanitizeReduceMotionCSS = path__default['default'].join(sanitizeDir, 'reduce-motion.css');24const sanitizeTypographyCSS = path__default['default'].join(sanitizeDir, 'typography.css');25const sanitizeSystemUiCSS = path__default['default'].join(sanitizeDir, 'system-ui.css');26const sanitizeUiMonospace = path__default['default'].join(sanitizeDir, 'ui-monospace.css'); // export a hashmap of css library filenames27const parsableFilenames = create({28  [normalizeCSS]: true,29  [normalizeOpinionatedCSS]: true,30  [sanitizeCSS]: true,31  [sanitizeAssetsCSS]: true,32  [sanitizeFormsCSS]: true,33  [sanitizeReduceMotionCSS]: true,34  [sanitizeTypographyCSS]: true,35  [sanitizeSystemUiCSS]: true,36  [sanitizeUiMonospace]: true37}); // export a hashmap of css library filenames by id38const resolvedFilenamesById = create({39  'normalize': [normalizeCSS],40  'normalize/opinionated': [normalizeOpinionatedCSS],41  'normalize/*': [normalizeOpinionatedCSS],42  'sanitize': [sanitizeCSS],43  'sanitize/assets': [sanitizeAssetsCSS],44  'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS],45  'sanitize/page': [sanitizeAssetsCSS],46  // deprecated; remaining for v10.0.0 compatibility47  'sanitize/reduce-motion': [sanitizeCSS, sanitizeReduceMotionCSS],48  'sanitize/system-ui': [sanitizeCSS, sanitizeSystemUiCSS],49  'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS],50  'sanitize/ui-monospace': [sanitizeCSS, sanitizeUiMonospace],51  'sanitize/*': [sanitizeCSS, sanitizeFormsCSS]52}); // get the resolved filename of a package/module53function resolve(id) {54  return resolve[id] = resolve[id] || Module__default['default']._resolveFilename(id, {55    id: currentFilename,56    filename: currentFilename,57    paths: Module__default['default']._nodeModulePaths(currentDirname)58  });59}60const cache$1 = create();61async function readFile(filename) {62  filename = path__default['default'].resolve(filename);63  cache$1[filename] = cache$1[filename] || create();64  return new Promise((resolve, reject) => fs__default['default'].stat(filename, (statsError, {65    mtime66  }) => statsError ? reject(statsError) : mtime === cache$1[filename].mtime ? resolve(cache$1[filename].data) : fs__default['default'].readFile(filename, 'utf8', (readFileError, data) => readFileError ? reject(readFileError) : resolve((cache$1[filename] = {67    data,68    mtime69  }).data))));70}71const cache = create(null);72var parse = ((filename, transformer) => readFile(filename).then( // cache the parsed css root73css => cache[css] = cache[css] || postcss__default['default'].parse(css, {74  from: filename75})).then( // clone the cached root76root => root.clone()).then( // transform the cloned root77clone => Promise.resolve(transformer(clone)).then( // resolve the cloned root78() => clone)));79var postcssImportNormalize = (commentsTransformer => opts => {80  opts = create(opts); // return an postcss-import configuration81  return create({82    load(filename, importOptions) {83      return filename in parsableFilenames // parse the file (the file and css are conservatively cached)84      ? parse(filename, commentsTransformer).then(root => root.toResult({85        to: filename,86        map: true87      }).css) : typeof opts.load === 'function' // otherwise, use the override loader88      ? opts.load.call(null, filename, importOptions) // otherwise, return the (conservatively cached) contents of the file89      : readFile(filename);90    },91    resolve(id, basedir, importOptions) {92      // get the css id by removing css extensions93      const cssId = id.replace(cssExtRegExp$1, '');94      return cssId in resolvedFilenamesById // return the known resolved path for the css id95      ? resolvedFilenamesById[cssId] : typeof opts.resolve === 'function' // otherwise, use the override resolver96      ? opts.resolve.call(null, id, basedir, importOptions) // otherwise, return the id to be resolved by postcss-import97      : id;98    }99  });100});101const cssExtRegExp$1 = /\.css\b/g;102const postcssPlugin = (commentsTransformer, opts) => root => {103  const promises = [];104  const insertedFilenames = {}; // use @import insertion point105  root.walkAtRules(importRegExp, atrule => {106    // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css")107    const name = atrule.name.match(importRegExp)[1]; // get url from "library", 'library', url("library"), url('library'), or the fallback value108    const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name;109    if (url) {110      // get the css id by removing css extensions111      const cssId = url.replace(cssExtRegExp, '');112      if (cssId in resolvedFilenamesById) {113        // promise the library import is replaced with its contents114        promises.push(Promise.all(resolvedFilenamesById[cssId].filter( // ignore filenames that have already been inserted115        filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)116        filename => parse(filename, commentsTransformer))).then(roots => {117          if (roots.length) {118            // combine all the library nodes returned by the parsed files119            const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // replace the import with all the library nodes120            atrule.replaceWith(...nodes);121          }122        }));123      }124    }125  });126  return Promise.all([].concat( // promise the library imports are replaced with their contents127  promises, // promise certain libraries are prepended128  Promise.all([].concat(opts.forceImport || []).reduce( // filter the id to be a known id or boolean true129  (all, id) => {130    if (id === true) {131      all.push(...resolvedFilenamesById.normalize);132    } else if (typeof id === 'string') {133      const cssId = id.replace(cssExtRegExp, '');134      if (cssId in resolvedFilenamesById) {135        all.push(...resolvedFilenamesById[cssId]);136      }137    }138    return all;139  }, []).filter( // ignore filenames that have already been inserted140  filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)141  filename => parse(filename, commentsTransformer))).then(roots => {142    if (roots.length) {143      // combine all the library nodes returned by the parsed files144      const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // prepend the stylesheet with all the library nodes145      root.prepend(...nodes);146    }147  })));148};149const cssExtRegExp = /\.css\b/g;150const importRegExp = /^import(?:-(normalize|sanitize))?$/;151const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/;152const plugin = opts => {153  opts = create(opts);154  const commentsTransformer = postcssBrowserComments__default['default'](opts).Once;155  const normalizeTransformer = postcssPlugin(commentsTransformer, opts);156  const postcssImportConfig = postcssImportNormalize(commentsTransformer);157  return {158    postcssPlugin: 'postcss-normalize',159    Once(root) {160      return normalizeTransformer(root);161    },162    postcssImport: postcssImportConfig163  };164};165plugin.postcss = true;...

class.Animation.js

Source:class.Animation.js

1//class.Animation.js2function Animation(_elementname) {3	// Animation properties4	this.elementName = _elementname;5	// Public methods6	this.resize = Animation_resize;7	this.cssAttributeMotion = Animation_cssAttributeMotion;8	this.moveElement = Animation_moveElement;9	// Private methods	10	this.sanitizeUnit = Animation_sanitizeUnit;11	this.sanitizeCss = Animation_sanitizeCss;12	this.getExternalCss = Animation_getExternalCss;13	// Element as object14	this.elementObject = document.getElementById(this.elementName);15}16/* Resize an object in the time given, longer time = slow animation, time is in seconds, interval is in milliseconds and defauts to 50 if omitted */17function Animation_resize(_width, _height, _time, _interval) {18	19	20	// Useful information21	this.elementWidth = this.sanitizeUnit(this.elementObject.style.width, "px");22	this.elementHeight = this.sanitizeUnit(this.elementObject.style.height, "px");23	// Object reference24	var _ref = this;25	// Resize properties26	var width = (_width != null) ? _width : this.elementWidth;27	var height = (_height != null) ? _height : this.elementHeight;28	var interval = (interval > 0) ? _interval : 50;29	// Calculate pixel speed per millisecond30	var widthDiff = (width > this.elementWidth) ? (width-this.elementWidth) : (this.elementWidth-width);31	var heightDiff = (height > this.elementHeight) ? (height-this.elementHeight) : (this.elementHeight-height);32	// Set width pixel speed	33	this.widthPixelSpeed = (widthDiff > 0 ) ? (widthDiff/_time)*(interval/1000) : 0;34	// Set height pixel speed35	this.heightPixelSpeed = (heightDiff > 0 ) ? (heightDiff/_time)*(interval/1000) : 0;36	// Animation logic37	this.loop = setInterval(function() {38		try {39			// These variables let us know when we have achieved the correct width/height40			var sameWidth = false;41			var sameHeight = false;42			// Check for difference in width43			if(width > _ref.elementWidth || width < _ref.elementWidth) {44				if(width > _ref.sanitizeUnit(_ref.elementObject.style.width, "px")) {45					_ref.elementObject.style.width = _ref.sanitizeUnit(_ref.sanitizeUnit(_ref.elementObject.style.width, "px")+_ref.widthPixelSpeed, "px");46					47					// Correct bouncing issues48					if(width <= _ref.sanitizeUnit(_ref.elementObject.style.width, "px"))49						sameWidth = true;50					else51						sameWidth = false;52				}53			54				if(width < _ref.sanitizeUnit(_ref.elementObject.style.width, "px")) {55					_ref.elementObject.style.width = _ref.sanitizeUnit(_ref.sanitizeUnit(_ref.elementObject.style.width, "px")-_ref.widthPixelSpeed, "px");56					// Correct bouncing issues57					if(width >= _ref.sanitizeUnit(_ref.elementObject.style.width))58						sameWidth = true;59					else60						sameWidth = false;61				}62			}63			else {64				sameWidth = true;65			}66			67			// Check for difference in height68			if(height > _ref.elementHeight || height < _ref.elementHeight) {69				if(height > _ref.sanitizeUnit(_ref.elementObject.style.height, "px")) {70					_ref.elementObject.style.height = _ref.sanitizeUnit(_ref.sanitizeUnit(_ref.elementObject.style.height, "px")+_ref.heightPixelSpeed, "px");71					// Correct bouncing issues72					if (height <= _ref.sanitizeUnit(_ref.elementObject.style.height, "px"))73						sameHeight = true;74					else75						sameHeight = false;76				}77			78				if(height < _ref.sanitizeUnit(_ref.elementObject.style.height, "px")) {79					_ref.elementObject.style.height = _ref.sanitizeUnit(_ref.sanitizeUnit(_ref.elementObject.style.height, "px")-_ref.heightPixelSpeed, "px");80					// Correct bouncing issues81					if(height >= _ref.sanitizeUnit(_ref.elementObject.style.height, "px"))82						sameHeight = true;83					else84						sameHeight = false;85				}86			}87			else {88				sameHeight = true;89			}90		} 91		catch(e) {92			// Abort93			window.alert(e);94			clearInterval(_ref.loop);95		}96		// Check if animation should continue running or complete97		if (sameWidth && sameHeight) {98			_ref.elementObject.style.width = _ref.sanitizeUnit(width, "px");99			_ref.elementObject.style.height = _ref.sanitizeUnit(height, "px");100			clearInterval(_ref.loop);101			_ref.onComplete();102		}103	}, interval);104}105/* Change element css attribute value over time */106function Animation_cssAttributeMotion(_elementattribute, _newvalue, _unit, _time, _interval) {107	// Object reference108	var _ref = this;109	// Atribute properties110	var elementAttribute = _elementattribute;111	var newValue = _newvalue;112	var unit = _unit;113	var interval = (interval > 0) ? _interval : 50;114	// Get existing information about element115	var existingValue = eval("this.elementObject.style."+this.sanitizeCss(elementAttribute)) ? this.sanitizeUnit(eval("this.elementObject.style."+this.sanitizeCss(elementAttribute)), unit) : this.sanitizeUnit(this.getExternalCss(elementAttribute), unit);116	117	// Calculate pixel speed per millisecond118	var pixelDiff = (newValue > existingValue) ? (newValue-existingValue) : (existingValue-newValue);119	// Set pixel speed	120	this.pixelSpeed = (pixelDiff > 0 ) ? (pixelDiff/_time)*(interval/1000) : 0;121	// Animation logic122	this.loop = setInterval(function() {		123		try {124			// This variable lets us know when we have achieved the correct value125			var sameValue = false;126			// Check for difference in size127			if(newValue > existingValue || newValue < existingValue) {128				if(newValue > existingValue) {129					eval("_ref.elementObject.style."+_ref.sanitizeCss(elementAttribute)+" = _ref.sanitizeUnit(existingValue+_ref.pixelSpeed, unit);");130					// Correct bouncing issues131					if(newValue <= existingValue)132						sameValue = true;133					else134						sameValue = false;135				}136			137				if(newValue < existingValue) {138					eval("_ref.elementObject.style."+_ref.sanitizeCss(elementAttribute)+" = _ref.sanitizeUnit(existingValue-_ref.pixelSpeed, unit);");139					// Correct bouncing issues140					if(newValue >= existingValue)141						sameValue = true;142					else143						sameValue = false;144				}145			}146			else {147				sameValue = true;148			}149			// Update every iteration150			existingValue = _ref.sanitizeUnit(eval("_ref.elementObject.style."+_ref.sanitizeCss(elementAttribute)), unit);151		} 152		catch (e) {153			// Abort154			window.alert(e);155			clearInterval(_ref.loop);156		}157		// Check if animation should continue running or complete158		if (sameValue) {159			eval("_ref.elementObject.style."+_ref.sanitizeCss(elementAttribute)+" =  _ref.sanitizeUnit(newValue, unit);");160			clearInterval(_ref.loop);161			_ref.onComplete();162		}163	}, interval);164}165// Move element166function Animation_moveElement() {167	this.elementObject.style.opacity = ".5";168	var moveableUser = display.createMoveableUser(this.elementObject.firstChild.nodeValue);169	var _ref = this;170	// Move this element while mouse moves171	document.onmousemove = function(_event) {172		event = _event || window.event;173		mouseX = event.clientX;174		mouseY = event.clientY;175		176		var objHeight = _ref.getExternalCss("height");177		var objWidth = window.getComputedStyle(moveableUser, "").getPropertyValue("width");178		window.status = objWidth;179		moveableUser.style.top = (mouseY-(parseInt(objHeight)/2)) + "px";180		moveableUser.style.left = (mouseX-(parseInt(objWidth)/2)) + "px";181	}182	// Moveable on release183	moveableUser.onmouseup = function() {184		if(checkUserDrop(_ref.elementObject.firstChild.nodeValue, parseInt(moveableUser.style.left), parseInt(moveableUser.style.top), "imagePlayer2")) {185			_ref.elementObject.onmousedown = null;186			_ref.elementObject.style.backgroundColor = "#008800";187			_ref.elementObject.style.color = "#FFFFFF";188		}189		_ref.elementObject.style.opacity = "1";190		display.destroyMoveableUser(_ref.elementObject.firstChild.nodeValue);191		document.onmousemove = null;192	}193}194// Convert from int to px and vice-versa195function Animation_sanitizeUnit(_data, _unit) {196	var data = _data;197	var unit = _unit;198	// If unit is null most likely means we don't need to append a unit199	if(unit != null) {200		if((data+"").indexOf(unit) > -1)201			return parseFloat(data);202		else203			return data+unit;204	}205	else {206		if(typeof data == "string")207			return parseFloat(data);208		else209			return data;210	}211}212// Css-Css to cssCss and vice versa213function Animation_sanitizeCss(_data) {214	if(_data.indexOf("-") > -1)215		return _data.replace(/\-[a-z]/g, function (stuuf) { return stuuf.substring(1).toUpperCase(); });216	else217		return _data.replace(/[A-Z]/g, "-$&").toLowerCase();218}219// Get values from external stylesheet220function Animation_getExternalCss(_property) {221	var property = _property;222	var namespace = this.sanitizeCss(_property);223	if(this.elementObject.currentStyle)224		return this.elementObject.currentStyle.getPropertyValue(property);225	else if(window.getComputedStyle)226		return window.getComputedStyle(this.elementObject, "").getPropertyValue(property);227	else228		return null;...

index.mjs

Source:index.mjs

1import postcssBrowserComments from 'postcss-browser-comments';2import Module from 'module';3import path from 'path';4import { URL } from 'url';5import fs from 'fs';6import postcss from 'postcss';7const assign = (...objects) => Object.assign(...objects);8const create = (...objects) => assign(Object.create(null), ...objects);9const currentURL = import.meta.url;10const currentFilename = new URL(currentURL).pathname;11const currentDirname = path.dirname(currentFilename); // get resolved filenames for normalize.css12const normalizeCSS = resolve('@csstools/normalize.css');13const normalizeDir = path.dirname(normalizeCSS);14const normalizeOpinionatedCSS = path.join(normalizeDir, 'opinionated.css'); // get resolved filenames for sanitize.css15const sanitizeCSS = resolve('sanitize.css');16const sanitizeDir = path.dirname(sanitizeCSS);17const sanitizeAssetsCSS = path.join(sanitizeDir, 'assets.css');18const sanitizeFormsCSS = path.join(sanitizeDir, 'forms.css');19const sanitizeReduceMotionCSS = path.join(sanitizeDir, 'reduce-motion.css');20const sanitizeTypographyCSS = path.join(sanitizeDir, 'typography.css');21const sanitizeSystemUiCSS = path.join(sanitizeDir, 'system-ui.css');22const sanitizeUiMonospace = path.join(sanitizeDir, 'ui-monospace.css'); // export a hashmap of css library filenames23const parsableFilenames = create({24  [normalizeCSS]: true,25  [normalizeOpinionatedCSS]: true,26  [sanitizeCSS]: true,27  [sanitizeAssetsCSS]: true,28  [sanitizeFormsCSS]: true,29  [sanitizeReduceMotionCSS]: true,30  [sanitizeTypographyCSS]: true,31  [sanitizeSystemUiCSS]: true,32  [sanitizeUiMonospace]: true33}); // export a hashmap of css library filenames by id34const resolvedFilenamesById = create({35  'normalize': [normalizeCSS],36  'normalize/opinionated': [normalizeOpinionatedCSS],37  'normalize/*': [normalizeOpinionatedCSS],38  'sanitize': [sanitizeCSS],39  'sanitize/assets': [sanitizeAssetsCSS],40  'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS],41  'sanitize/page': [sanitizeAssetsCSS],42  // deprecated; remaining for v10.0.0 compatibility43  'sanitize/reduce-motion': [sanitizeCSS, sanitizeReduceMotionCSS],44  'sanitize/system-ui': [sanitizeCSS, sanitizeSystemUiCSS],45  'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS],46  'sanitize/ui-monospace': [sanitizeCSS, sanitizeUiMonospace],47  'sanitize/*': [sanitizeCSS, sanitizeFormsCSS]48}); // get the resolved filename of a package/module49function resolve(id) {50  return resolve[id] = resolve[id] || Module._resolveFilename(id, {51    id: currentFilename,52    filename: currentFilename,53    paths: Module._nodeModulePaths(currentDirname)54  });55}56const cache$1 = create();57async function readFile(filename) {58  filename = path.resolve(filename);59  cache$1[filename] = cache$1[filename] || create();60  return new Promise((resolve, reject) => fs.stat(filename, (statsError, {61    mtime62  }) => statsError ? reject(statsError) : mtime === cache$1[filename].mtime ? resolve(cache$1[filename].data) : fs.readFile(filename, 'utf8', (readFileError, data) => readFileError ? reject(readFileError) : resolve((cache$1[filename] = {63    data,64    mtime65  }).data))));66}67const cache = create(null);68var parse = ((filename, transformer) => readFile(filename).then( // cache the parsed css root69css => cache[css] = cache[css] || postcss.parse(css, {70  from: filename71})).then( // clone the cached root72root => root.clone()).then( // transform the cloned root73clone => Promise.resolve(transformer(clone)).then( // resolve the cloned root74() => clone)));75var postcssImportNormalize = (commentsTransformer => opts => {76  opts = create(opts); // return an postcss-import configuration77  return create({78    load(filename, importOptions) {79      return filename in parsableFilenames // parse the file (the file and css are conservatively cached)80      ? parse(filename, commentsTransformer).then(root => root.toResult({81        to: filename,82        map: true83      }).css) : typeof opts.load === 'function' // otherwise, use the override loader84      ? opts.load.call(null, filename, importOptions) // otherwise, return the (conservatively cached) contents of the file85      : readFile(filename);86    },87    resolve(id, basedir, importOptions) {88      // get the css id by removing css extensions89      const cssId = id.replace(cssExtRegExp$1, '');90      return cssId in resolvedFilenamesById // return the known resolved path for the css id91      ? resolvedFilenamesById[cssId] : typeof opts.resolve === 'function' // otherwise, use the override resolver92      ? opts.resolve.call(null, id, basedir, importOptions) // otherwise, return the id to be resolved by postcss-import93      : id;94    }95  });96});97const cssExtRegExp$1 = /\.css\b/g;98const postcssPlugin = (commentsTransformer, opts) => root => {99  const promises = [];100  const insertedFilenames = {}; // use @import insertion point101  root.walkAtRules(importRegExp, atrule => {102    // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css")103    const name = atrule.name.match(importRegExp)[1]; // get url from "library", 'library', url("library"), url('library'), or the fallback value104    const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name;105    if (url) {106      // get the css id by removing css extensions107      const cssId = url.replace(cssExtRegExp, '');108      if (cssId in resolvedFilenamesById) {109        // promise the library import is replaced with its contents110        promises.push(Promise.all(resolvedFilenamesById[cssId].filter( // ignore filenames that have already been inserted111        filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)112        filename => parse(filename, commentsTransformer))).then(roots => {113          if (roots.length) {114            // combine all the library nodes returned by the parsed files115            const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // replace the import with all the library nodes116            atrule.replaceWith(...nodes);117          }118        }));119      }120    }121  });122  return Promise.all([].concat( // promise the library imports are replaced with their contents123  promises, // promise certain libraries are prepended124  Promise.all([].concat(opts.forceImport || []).reduce( // filter the id to be a known id or boolean true125  (all, id) => {126    if (id === true) {127      all.push(...resolvedFilenamesById.normalize);128    } else if (typeof id === 'string') {129      const cssId = id.replace(cssExtRegExp, '');130      if (cssId in resolvedFilenamesById) {131        all.push(...resolvedFilenamesById[cssId]);132      }133    }134    return all;135  }, []).filter( // ignore filenames that have already been inserted136  filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)137  filename => parse(filename, commentsTransformer))).then(roots => {138    if (roots.length) {139      // combine all the library nodes returned by the parsed files140      const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // prepend the stylesheet with all the library nodes141      root.prepend(...nodes);142    }143  })));144};145const cssExtRegExp = /\.css\b/g;146const importRegExp = /^import(?:-(normalize|sanitize))?$/;147const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/;148const plugin = opts => {149  opts = create(opts);150  const commentsTransformer = postcssBrowserComments(opts).Once;151  const normalizeTransformer = postcssPlugin(commentsTransformer, opts);152  const postcssImportConfig = postcssImportNormalize(commentsTransformer);153  return {154    postcssPlugin: 'postcss-normalize',155    Once(root) {156      return normalizeTransformer(root);157    },158    postcssImport: postcssImportConfig159  };160};161plugin.postcss = true;...

index.esm.mjs

Source:index.esm.mjs

1import postcss from 'postcss';2import postcssBrowserComments from 'postcss-browser-comments';3import Module from 'module';4import path from 'path';5import { URL } from 'url';6import fs from 'fs';7const assign = (...objects) => Object.assign(...objects);8const create = (...objects) => assign(Object.create(null), ...objects);9const currentURL = import.meta.url;10const currentFilename = new URL(currentURL).pathname;11const currentDirname = path.dirname(currentFilename); // get resolved filenames for css libraries12const normalizeCSS = resolve('@csstools/normalize.css');13const normalizeOpinionatedCSS = resolve('@csstools/normalize.css/opinionated.css');14const sanitizeCSS = resolve('sanitize.css');15const sanitizeFormsCSS = resolve('sanitize.css/forms.css');16const sanitizePageCSS = resolve('sanitize.css/page.css');17const sanitizeTypographyCSS = resolve('sanitize.css/typography.css'); // export a hashmap of css library filenames18const parsableFilenames = create({19  [normalizeCSS]: true,20  [normalizeOpinionatedCSS]: true,21  [sanitizeCSS]: true,22  [sanitizeFormsCSS]: true,23  [sanitizePageCSS]: true,24  [sanitizeTypographyCSS]: true25}); // export a hashmap of css library filenames by id26const resolvedFilenamesById = create({27  'normalize': [normalizeCSS],28  'normalize/opinionated': [normalizeOpinionatedCSS],29  'normalize/*': [normalizeOpinionatedCSS],30  'sanitize': [sanitizeCSS],31  'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS],32  'sanitize/page': [sanitizeCSS, sanitizePageCSS],33  'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS],34  'sanitize/*': [sanitizeCSS, sanitizeFormsCSS, sanitizePageCSS, sanitizeTypographyCSS]35}); // get the resolved filename of a package/module36function resolve(id) {37  return resolve[id] = resolve[id] || Module._resolveFilename(id, {38    id: currentFilename,39    filename: currentFilename,40    paths: Module._nodeModulePaths(currentDirname)41  });42}43const cache = create();44async function readFile(filename) {45  filename = path.resolve(filename);46  cache[filename] = cache[filename] || create();47  return new Promise((resolve, reject) => fs.stat(filename, (statsError, {48    mtime49  }) => statsError ? reject(statsError) : mtime === cache[filename].mtime ? resolve(cache[filename].data) : fs.readFile(filename, 'utf8', (readFileError, data) => readFileError ? reject(readFileError) : resolve((cache[filename] = {50    data,51    mtime52  }).data))));53}54const cache$1 = create(null);55var parse = ((filename, transformer) => readFile(filename).then( // cache the parsed css root56css => cache$1[css] = cache$1[css] || postcss.parse(css, {57  from: filename58})).then( // clone the cached root59root => root.clone()).then( // transform the cloned root60clone => Promise.resolve(transformer(clone)).then( // resolve the cloned root61() => clone)));62var postcssImportNormalize = (commentsTransformer => opts => {63  opts = create(opts); // return an postcss-import configuration64  return create({65    load(filename, importOptions) {66      return filename in parsableFilenames // parse the file (the file and css are conservatively cached)67      ? parse(filename, commentsTransformer).then(root => root.toResult({68        to: filename,69        map: true70      }).css) : typeof opts.load === 'function' // otherwise, use the override loader71      ? opts.load.call(null, filename, importOptions) // otherwise, return the (conservatively cached) contents of the file72      : readFile(filename);73    },74    resolve(id, basedir, importOptions) {75      // get the css id by removing css extensions76      const cssId = id.replace(cssExtRegExp, '');77      return cssId in resolvedFilenamesById // return the known resolved path for the css id78      ? resolvedFilenamesById[cssId] : typeof opts.resolve === 'function' // otherwise, use the override resolver79      ? opts.resolve.call(null, id, basedir, importOptions) // otherwise, return the id to be resolved by postcss-import80      : id;81    }82  });83});84const cssExtRegExp = /\.css\b/g;85const postcssPlugin = (commentsTransformer, opts) => root => {86  const promises = [];87  const insertedFilenames = {}; // use @import insertion point88  root.walkAtRules(importRegExp, atrule => {89    // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css")90    const name = atrule.name.match(importRegExp)[1]; // get url from "library", 'library', url("library"), url('library'), or the fallback value91    const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name;92    if (url) {93      // get the css id by removing css extensions94      const cssId = url.replace(cssExtRegExp$1, '');95      if (cssId in resolvedFilenamesById) {96        // promise the library import is replaced with its contents97        promises.push(Promise.all(resolvedFilenamesById[cssId].filter( // ignore filenames that have already been inserted98        filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)99        filename => parse(filename, commentsTransformer))).then(roots => {100          if (roots.length) {101            // combine all the library nodes returned by the parsed files102            const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // replace the import with all the library nodes103            atrule.replaceWith(...nodes);104          }105        }));106      }107    }108  });109  return Promise.all([].concat( // promise the library imports are replaced with their contents110  promises, // promise certain libraries are prepended111  Promise.all([].concat(opts.forceImport || []).reduce( // filter the id to be a known id or boolean true112  (all, id) => {113    if (id === true) {114      all.push(...resolvedFilenamesById.normalize);115    } else if (typeof id === 'string') {116      const cssId = id.replace(cssExtRegExp$1, '');117      if (cssId in resolvedFilenamesById) {118        all.push(...resolvedFilenamesById[cssId]);119      }120    }121    return all;122  }, []).filter( // ignore filenames that have already been inserted123  filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames)).map( // parse the file (the file and css are conservatively cached)124  filename => parse(filename, commentsTransformer))).then(roots => {125    if (roots.length) {126      // combine all the library nodes returned by the parsed files127      const nodes = roots.reduce((all, root) => all.concat(root.nodes), []); // prepend the stylesheet with all the library nodes128      root.prepend(...nodes);129    }130  })));131};132const cssExtRegExp$1 = /\.css\b/g;133const importRegExp = /^import(?:-(normalize|sanitize))?$/;134const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/;135var index = postcss.plugin('postcss-normalize', opts => {136  opts = create(opts);137  const commentsTransformer = postcssBrowserComments(opts);138  const normalizeTransformer = postcssPlugin(commentsTransformer, opts);139  const postcssImportConfig = postcssImportNormalize(commentsTransformer);140  return assign(normalizeTransformer, {141    postcssImport: postcssImportConfig142  });143});144export default index;...

cssMap.js

Source:cssMap.js

1import { create } from './util'2import Module from 'module'3import path from 'path'4import { URL } from 'url'5// get esm-compatible script metadata6const currentURL = import.meta.url7const currentFilename = new URL(currentURL).pathname8const currentDirname = path.dirname(currentFilename)9// get resolved filenames for normalize.css10const normalizeCSS = resolve('@csstools/normalize.css')11const normalizeDir = path.dirname(normalizeCSS)12const normalizeOpinionatedCSS = path.join(normalizeDir, 'opinionated.css')13// get resolved filenames for sanitize.css14const sanitizeCSS = resolve('sanitize.css')15const sanitizeDir = path.dirname(sanitizeCSS)16const sanitizeAssetsCSS = path.join(sanitizeDir, 'assets.css')17const sanitizeFormsCSS = path.join(sanitizeDir, 'forms.css')18const sanitizeReduceMotionCSS = path.join(sanitizeDir, 'reduce-motion.css')19const sanitizeTypographyCSS = path.join(sanitizeDir, 'typography.css')20const sanitizeSystemUiCSS = path.join(sanitizeDir, 'system-ui.css')21const sanitizeUiMonospace = path.join(sanitizeDir, 'ui-monospace.css')22// export a hashmap of css library filenames23export const parsableFilenames = create({24	[normalizeCSS]: true,25	[normalizeOpinionatedCSS]: true,26	[sanitizeCSS]: true,27	[sanitizeAssetsCSS]: true,28	[sanitizeFormsCSS]: true,29	[sanitizeReduceMotionCSS]: true,30	[sanitizeTypographyCSS]: true,31	[sanitizeSystemUiCSS]: true,32	[sanitizeUiMonospace]: true,33})34// export a hashmap of css library filenames by id35export const resolvedFilenamesById = create({36	'normalize': [normalizeCSS],37	'normalize/opinionated': [normalizeOpinionatedCSS],38	'normalize/*': [normalizeOpinionatedCSS],39	'sanitize': [sanitizeCSS],40	'sanitize/assets': [sanitizeAssetsCSS],41	'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS],42	'sanitize/page': [sanitizeAssetsCSS], // deprecated; remaining for v10.0.0 compatibility43	'sanitize/reduce-motion': [sanitizeCSS, sanitizeReduceMotionCSS],44	'sanitize/system-ui': [sanitizeCSS, sanitizeSystemUiCSS],45	'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS],46	'sanitize/ui-monospace': [sanitizeCSS, sanitizeUiMonospace],47	'sanitize/*': [sanitizeCSS, sanitizeFormsCSS],48})49// get the resolved filename of a package/module50function resolve (id) {51	return resolve[id] = resolve[id] || Module._resolveFilename(id, {52		id: currentFilename,53		filename: currentFilename,54		paths: Module._nodeModulePaths(currentDirname)55	})...

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6    .remote(options)7    .init()8    .getTitle().then(function(title) {9        console.log('Title was: ' + title);10    })11    .end();12var webdriverio = require('webdriverio');13var options = {14    desiredCapabilities: {15    }16};17    .remote(options)18    .init()19    .getTitle().then(function(title) {20        console.log('Title was: ' + title);21    })22    .end();23var webdriverio = require('webdriverio');24var options = {25    desiredCapabilities: {26    }27};28    .remote(options)29    .init()30    .getTitle().then(function(title) {31        console.log('Title was: ' + title);32    })

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6var client = webdriverio.remote(options);7    .init()8    .getTitle().then(function(title) {9        console.log('Title was: ' + title);10    })11    .end();

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6var client = webdriverio.remote(options);7    .init()8    .setValue('#lst-ib', 'webdriverio')9    .getTitle().then(function(title) {10        console.log('Title was: ' + title);11    })12    .end();13var webdriverio = require('webdriverio');14var options = {15    desiredCapabilities: {16    }17};18var client = webdriverio.remote(options);19    .init()20    .setValue('#lst-ib', 'webdriverio')21    .getTitle().then(function(title) {22        console.log('Title was: ' + title);23    })24    .end();25var webdriverio = require('webdriverio');26var options = {27    desiredCapabilities: {28    }29};30var client = webdriverio.remote(options);31    .init()32    .setValue('#lst-ib', 'webdriverio')33    .getTitle().then(function(title) {34        console.log('Title was: ' + title);35    })36    .end();37var webdriverio = require('webdriverio');38var options = {39    desiredCapabilities: {40    }41};42var client = webdriverio.remote(options);43    .init()44    .setValue('#lst-ib', 'webdriverio')45    .getTitle().then(function(title) {46        console.log('Title was: ' + title);47    })48    .end();

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6    .remote(options)7    .init()8    .getTitle().then(function(title) {9        console.log('Title was: ' + title);10    })11    .end();12var webdriverio = require('webdriverio');13var options = {14    desiredCapabilities: {15    }16};17    .remote(options)18    .init()19    .getTitle().then(function(title) {20        console.log('Title was: ' + title);21    })22    .end();23var webdriverio = require('webdriverio');24var options = {25    desiredCapabilities: {26    }27};28    .remote(options)29    .init()30    .getTitle().then(function(title) {31        console.log('Title was: ' + title);32    })33    .end();34var webdriverio = require('webdriverio');35var options = {36    desiredCapabilities: {37    }38};39    .remote(options)40    .init()41    .getTitle().then(function(title) {42        console.log('Title was: ' + title);43    })44    .end();45var webdriverio = require('webdriverio');46var options = {47    desiredCapabilities: {48    }49};50    .remote(options)51    .init()52    .getTitle().then(function(title) {

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = {3    desiredCapabilities: {4    }5};6var client = webdriverio.remote(options);7    .init()8    .setValue('#lst-ib', 'webdriverio')9    .click('button[name="btnG"]')10    .getTitle().then(function(title) {11        console.log('Title was: ' + title);12    })13    .end();14var webdriverio = require('webdriverio');15var options = {16    desiredCapabilities: {17    }18};19var client = webdriverio.remote(options);20    .init()21    .setValue('#lst-ib', 'webdriverio')22    .click('button[name="btnG"]')23    .getTitle().then(function(title) {24        console.log('Title was: ' + title);25    })26    .end();27var webdriverio = require('webdriverio');28var options = {29    desiredCapabilities: {30    }31};32var client = webdriverio.remote(options);33    .init()34    .setValue('#lst-ib', 'webdriverio')35    .click('button[name="btnG"]')36    .getTitle().then(function(title) {37        console.log('Title was: ' + title);38    })39    .end();40var webdriverio = require('webdriverio');41var options = {42    desiredCapabilities: {43    }44};45var client = webdriverio.remote(options);46    .init()47    .setValue('#lst-ib', 'webdriverio')48    .click('button[name="btnG"]')49    .getTitle().then(function

Using AI Code Generation

1const webdriverio = require('webdriverio');2const assert = require('assert');3const options = {4    desiredCapabilities: {5    }6};7    .remote(options)8    .init()9    .getTitle().then(function(title) {10        assert.equal(title, 'Google');11    })12    .end();

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'phantomjs' } };3var client = webdriverio.remote(options);4    .init()5    .setValue('#lst-ib', 'webdriverio')6    .click('button[name="btnG"]')7    .getTitle().then(function(title) {8        console.log('Title was: ' + title);9    })10    .end();11var webdriverio = require('webdriverio');12var options = { desiredCapabilities: { browserName: 'phantomjs' } };13var client = webdriverio.remote(options);14    .init()15    .setValue('#lst-ib', 'webdriverio')16    .click('button[name="btnG"]')17    .getTitle().then(function(title) {18        console.log('Title was: ' + title);19    })20    .end();21var webdriverio = require('webdriverio');22var options = { desiredCapabilities: { browserName: 'phantomjs' } };23var client = webdriverio.remote(options);24    .init()25    .setValue('#lst-ib', 'webdriverio')26    .click('button[name="btnG"]')27    .getTitle().then(function(title) {28        console.log('Title was: ' + title);29    })30    .end();31var webdriverio = require('webdriverio');32var options = { desiredCapabilities: { browserName: 'phantomjs' } };33var client = webdriverio.remote(options);34    .init()35    .setValue('#lst-ib', 'webdriverio')36    .click('button[name="btnG"]')37    .getTitle().then(function(title) {

Using AI Code Generation

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'chrome' } };3var client = webdriverio.remote(options);4.init()5.setValue('input[type="text"]', 'webdriverio')6.sanitizeCSS('input[type="text"]', 'font-family')7.getText('input[type="text"]', function(err, result) {8    console.log(result);9})10.end();11[ 'Sanitized font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;' ]

Using AI Code Generation

1const webdriverio = require('webdriverio');2const options = {3    desiredCapabilities: {4    }5}6const client = webdriverio.remote(options)7client.init()8    .setValue('#lst-ib', 'webdriverio')9    .click('#tsbb')10    .getTitle().then(function (title) {11        console.log('Title was: ' + title);12    })13    .end();14const webdriverio = require('webdriverio');15const options = {16    desiredCapabilities: {17    }18}19const client = webdriverio.remote(options)20client.init()21    .setValue('#lst-ib', 'webdriverio')22    .click('#tsbb')23    .getTitle().then(function (title) {24        console.log('Title was: ' + title);25    })26    .end();27const webdriverio = require('webdriverio');28const options = {29    desiredCapabilities: {30    }31}32const client = webdriverio.remote(options)33client.init()34    .setValue('#lst-ib', 'webdriverio')35    .click('#tsbb')36    .getTitle().then(function (title) {37        console.log('Title was: ' + title);38    })39    .end();40const webdriverio = require('webdriverio');41const options = {42    desiredCapabilities: {43    }44}45const client = webdriverio.remote(options)46client.init()47    .setValue('#lst-ib', 'webdriverio')48    .click('#tsbb')49    .getTitle().then(function (title) {50        console.log('Title was: ' + title);

WebdriverIO Tutorial

Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.

Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.

Chapters

Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.
Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.
Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?
Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.
How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.
Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.
Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.
Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.
JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.
Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.