How to use getElementTagName method in Webdriverio
Best JavaScript code snippet using webdriverio-monorepo
scrapper.js
Source:scrapper.js 
...39 : buttonsTags.includes(elementTagName)40 ? 'button'41 : elementTagName;42const getElementAttributes = async (element, elementStyle) => {43 const elementTagName = await getElementTagName(element);44 const elementLocation = await getElementLocation(element);45 const getAttributesArray = () => [46 ...(linkTags.includes(elementTagName) ? [...linkAttributes] : []),47 ...(imageTags.includes(elementTagName) ? [...imageAttributes] : []),48 ];49 const textAttributeStyle = Object.entries(elementStyle)50 .map(([cssProp, style]) => `${cssProp}:${style}`)51 .join(';');52 const buildTextAttribute = async () => {53 const childDomElements = (await element.getAttribute('innerHTML'))54 .replaceAll(/ class="[A-Za-z0-9]*"/g, '')55 .replaceAll(/<h[1-6]>/g, '')56 .replaceAll(/<\/h[1-6]>/g, '');57 const domElement = `<${elementTagName} style="${textAttributeStyle}">${childDomElements}<${elementTagName}/>`;58 return domElement.replace(/\s\s+/g, ' ');59 };60 const attributesArray = [];61 for (const attribute of getAttributesArray()) {62 attributesArray.push({63 [attribute]: await element.getAttribute(attribute),64 });65 }66 const elementType = getElementType(elementTagName);67 const elementAttributes = {68 type: elementType,69 style: {70 ...elementStyle,71 ...(elementType === 'button' && {72 hover: await getElementHoverStyle(element),73 }),74 },75 text: textTags.includes(elementTagName)76 ? await buildTextAttribute()77 : await element.getText(),78 x: elementLocation.x,79 y: elementLocation.y,80 height: elementLocation.height,81 width: elementLocation.width,82 'z-index': await element.getCssValue('z-index'),83 rotation: (await element.getCssValue('rotation')) || '0',84 ...convertArrayToObj(attributesArray),85 };86 return elementAttributes;87};88const getComponentCountMap = (elements) =>89 convertArrayToObj(90 Object.entries(elements).map(([tag, elements]) => ({91 [tag]: elements.length,92 }))93 );94const getElementCssAttributes = async (element, elementTagName) => {95 const cssAttributes = [];96 for (const cssProp of textTags.includes(elementTagName)97 ? textCssAttributes98 : nonTextCssAttributes) {99 cssAttributes.push({ [cssProp]: await element.getCssValue(cssProp) });100 }101 return convertArrayToObj(cssAttributes);102};103const buildElementObject = async (element) => {104 const elementTagName = await getElementTagName(element);105 const elementCssAttributes = await getElementCssAttributes(106 element,107 elementTagName108 );109 const elementAttributes = await getElementAttributes(110 element,111 elementCssAttributes112 );113 return elementAttributes;114};115const getBuilderObject = (url, componentCountMap, components) => {116 return {117 url,118 type: builderElementType,...
presentation.js
Source:presentation.js
...53 if (container.tagName === 'rect') {54 return container;55 }56 const children = _.map(container.children, i => i);;57 const found = _.find(children, child => getElementTagName(svgDoc, child) === 'rect');58 if (found) {59 return found;60 }61 console.warn('No slide element found for container: ', container);62 console.warn('Using the container as the slide element. Presentation may behave unexpectedly.');63 return container;64 }65 function getElementTagName(svgDoc, el) {66 if (el.tagName === 'use') {67 const realElemId = el.getAttributeNS('http://www.w3.org/1999/xlink', 'href');68 const realElem = svgDoc.querySelector(realElemId);69 return getElementTagName(svgDoc, realElem);70 }71 return el.tagName;72 }73 function animateStep(stepIndex) {74 const currentStep = presentation[state.step];75 const nextStepIndex = getStepIndex(stepIndex);76 const nextStep = presentation[nextStepIndex];77 state.viewport.animateTo(nextStep.viewportPosition);78 // currentStep.container.setAttribute('class', 'hidden');79 // nextStep.container.setAttribute('class', '');80 state.step = nextStepIndex;81 }82 function next() {83 animateStep(state.step + 1);...
custom-element.js
Source:custom-element.js
...3function NotImplemented(instance, fname) {4 console.warn(`missing implementation for ${fname}(...data) in ${instance.__proto__.constructor.name}`);5}6// helper function for turning "ClassName" into "class-name"7function getElementTagName(cls) {8 return cls.prototype.constructor.name.replace(/([A-Z])([a-z])/g, (a, b, c, d) => {9 const r = `${b.toLowerCase()}${c}`;10 return d > 0 ? `-${r}` : r;11 });12}13/**14 * This is an enrichment class to make working with custom elements15 * actually pleasant, rather than a ridiculous exercise in figuring16 * out a low-level spec.17 */18class CustomElement extends HTMLElement {19 static register(cls) {20 if (!cls[REG_KEY]) {21 const tagName = cls.tagName || getElementTagName(cls);22 customElements.define(tagName, cls);23 cls[REG_KEY] = true;24 return customElements.whenDefined(tagName);25 }26 return Promise.resolve();27 }28 static get tagName() {29 return getElementTagName(this);30 }31 constructor(options = {}) {32 super();33 if (!customElements.resolveScope) {34 customElements.resolveScope = function (scope) {35 try {36 return scope.getRootNode().host;37 } catch (e) {38 console.warn(e);39 }40 return window;41 };42 }43 this._options = options;...
type.test.js
Source:type.test.js
1const uuid = require('uuid/v4');2const type = require('../../../../src/core/actions/type');3const logger = require('../../../../src/utils/logger');4const { MESSAGE_TYPE, ACTIVE_ELEMENT_ERR } = require('../../../../src/constants');5describe('type command test suite', () => {6 test('type function should trigger the corresponding webdriver function with the provided parameters when the target element is an "input"', async () => {7 const state = {8 browser: {9 getActiveElement: jest.fn(),10 getElementTagName: jest.fn(),11 getElementAttribute: jest.fn(),12 elementSendKeys: jest.fn(),13 },14 };15 const allowedInputTypes = ['date',16 'datetime-local',17 'email',18 'month',19 'number',20 'password',21 'search',22 'tel',23 'text',24 'time',25 'url',26 'week'];27 for (let i = 0; i < allowedInputTypes.length; i += 1) {28 const elementUUID = uuid();29 state.browser.getActiveElement.mockResolvedValue({ ELEMENT: elementUUID });30 state.browser.getElementTagName.mockResolvedValue('input');31 state.browser.getElementAttribute.mockResolvedValue(allowedInputTypes[i]);32 // eslint-disable-next-line no-await-in-loop33 await type(state, { args: { typeText: '1234' } });34 expect(state.browser.elementSendKeys).toHaveBeenCalledWith(elementUUID, ['1234']);35 }36 });37 test('type function should trigger the corresponding webdriver function with the provided parameters when the target element is a text area', async () => {38 const state = {39 browser: {40 getActiveElement: jest.fn(),41 getElementTagName: jest.fn(),42 getElementAttribute: jest.fn(),43 elementSendKeys: jest.fn(),44 },45 };46 const elementUUID = uuid();47 state.browser.getActiveElement.mockResolvedValue({ ELEMENT: elementUUID });48 state.browser.getElementTagName.mockResolvedValue('textarea');49 state.browser.getElementAttribute.mockResolvedValue('');50 await type(state, { args: { typeText: '1234' } });51 expect(state.browser.elementSendKeys).toHaveBeenCalledWith(elementUUID, ['1234']);52 });53 test('type function should reject with an error if the currently focused element is not a text area or a typable input type', async () => {54 const state = {55 browser: {56 getActiveElement: jest.fn(),57 getElementTagName: jest.fn(),58 getElementAttribute: jest.fn(),59 elementSendKeys: jest.fn(),60 },61 };62 logger.emitLogs = jest.fn();63 const elementUUID = uuid();64 state.browser.getActiveElement.mockResolvedValue({ ELEMENT: elementUUID });65 state.browser.getElementTagName.mockResolvedValue('');66 state.browser.getElementAttribute.mockResolvedValue('');67 await type(state, { args: { typeText: '1234' } });68 expect(logger.emitLogs).toHaveBeenCalledWith({ message: ACTIVE_ELEMENT_ERR, type: MESSAGE_TYPE.ERROR });69 });...
twelve.js
Source:twelve.js
1document.getElementTagName('h2')2VM635:1 Uncaught TypeError: document.getElementTagName is not a function3 at <anonymous>:1:104(anonymous) @ VM635:15document.getElementsByTagName('h2')6HTMLCollection(4)Â [h2, h2, h2, h2]7document.getElementsByTagName('h2')[0]8<h2>âAAKASHâ</h2>â9document.getElementsByTagName('h2')[0].innerHTML10"AAKASH"11document.getElementsByTagName('h2')[0].innerHTML="John"12"John"13document.getElementsByTagName('h2')[0].style.color="red"14"red"15document.getElementsByClassName('scroll')...
rendition1.js
Source:rendition1.js
...12 delegateTagNameListener = function(el, eventType, tagName, fn) {13 var fnDelegate = function(el, target) {14 var sourceNode,15 descendant;16 if(getElementTagName(target) === tagName) {17 sourceNode = target;18 } else {19 descendant = getElementParentElement(target);20 while (null !== descendant && descendant !== el) {21 if (getElementTagName(descendant) === tagName) {22 sourceNode = descendant;23 break;24 }25 descendant = getElementParentElement(descendant);26 }27 }28 return sourceNode;29 };30 return delegateListener(el, eventType, fn, fnDelegate);31 };...
elementIdName.js
Source:elementIdName.js
1'use strict';2const addElementIdName = require('lib/commands/protocol/elementIdName');3const {mkBrowser_} = require('../../../utils');4describe('"elementIdName" command', () => {5 it('should add "elementIdName" command', () => {6 const browser = mkBrowser_();7 addElementIdName(browser);8 assert.calledOnceWithExactly(browser.addCommand, 'elementIdName', sinon.match.func);9 });10 it('should call "getElementTagName" with passed element id', async () => {11 const browser = mkBrowser_();12 addElementIdName(browser);13 await browser.elementIdName('element-id');14 assert.calledOnceWithExactly(browser.getElementTagName, 'element-id');15 });...
getElementTagName.js
Source:getElementTagName.js
...5exports.default = getElementTagName;6var _getElementTagName = _interopRequireDefault(require("../scripts/getElementTagName"));7var _utils = require("../utils");8function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }9async function getElementTagName({10 elementId11}) {12 const elementHandle = this.elementStore.get(elementId);13 if (!elementHandle) {14 throw (0, _utils.getStaleElementError)(elementId);15 }16 const page = this.getPageHandle(true);17 const result = await page.$eval('html', _getElementTagName.default, elementHandle);18 return (result || '').toLowerCase();...
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 console.log('Title is: ' + title)5 })6 it('should have the right tag name', () => {7 const tagName = elem.getTagName()8 console.log('Tag name is: ' + tagName)9 })10})11describe('webdriver.io page', () => {12 it('should have the right title', () => {13 const title = browser.getTitle()14 console.log('Title is: ' + title)15 })16 it('should have the right attribute', () => {17 const attribute = elem.getAttribute('class')18 console.log('Attribute is: ' + attribute)19 })20})21describe('webdriver.io page', () => {22 it('should have the right title', () => {23 const title = browser.getTitle()24 console.log('Title is: ' + title)25 })26 it('should have the right css property', () => {27 const cssProperty = elem.getCSSProperty('color')28 console.log('CSS Property is: ' + cssProperty)29 })30})31describe('webdriver.io page', () => {32 it('should have the right title', () => {33 const title = browser.getTitle()34 console.log('Title is: ' + title)35 })36 it('should have the right css property', () => {37 const size = elem.getSize()38 console.log('Size is: ' + size)39 })40})41describe('webdriver.io page
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle();4 console.log('Title is: ' + title);5 });6 it('should have the right title', () => {7 const title = browser.getTitle();8 console.log('Title is: ' + title);9 });10 it('should have the right title', () => {11 const title = browser.getTitle();12 console.log('Title is: ' + title);13 });14 it('should have the right title', () => {15 const title = browser.getTitle();16 console.log('Title is: ' + title);17 });18 it('should have the right title', () => {19 const title = browser.getTitle();20 console.log('Title is: ' + title);21 });22 it('should have the right title', () => {23 const title = browser.getTitle();24 console.log('Title is: ' + title);25 });26 it('should have the right title', () => {27 const title = browser.getTitle();28 console.log('Title is: ' + title);29 });30 it('should have the right title', () => {31 const title = browser.getTitle();32 console.log('Title is: ' + title);
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 .getElementTagName('input[name="q"]').then(function(tagName) {12 console.log('Tag name of the element is: ' + tagName);13 })14 .end();
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 console.log('Title is: ' + title)5 expect(title).toEqual('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')6 })7 it('should have the right title', () => {8 const tagName = element.getTagName()9 console.log('Tag Name is: ' + tagName)10 expect(tagName).toEqual('a')11 })12})
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 console.log('Title was: ' + title)5 const tag = browser.getElementTagName('.homeHero')6 console.log('Tag is: ' + tag)7 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')8 })9})10- **getHTML()**11describe('webdriver.io page', () => {12 it('should have the right title', () => {13 const title = browser.getTitle()14 console.log('Title was: ' + title)15 const tag = browser.getElementTagName('.homeHero')16 console.log('Tag is: ' + tag)17 const html = browser.getHTML('.homeHero')18 console.log('HTML is: ' + html)19 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')20 })21})22- **getCSSProperty()**23describe('webdriver.io page', () => {24 it('should have the right title', () => {25 const title = browser.getTitle()26 console.log('Title was: ' + title)27 const tag = browser.getElementTagName('.homeHero')28 console.log('Tag is: ' + tag)29 const html = browser.getHTML('.homeHero')30 console.log('HTML is: ' + html)31 const css = browser.getCSSProperty('.homeHero', 'background-color')32 console.log('CSS property is: ' + css)33 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')34 })35})36- **getAttribute()**37describe('webdriver.io page', () => {38 it('should have the right title', () => {39 const title = browser.getTitle()40 console.log('Title was: ' + title)
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 console.log('Title was: ' + title)5 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')6 })7 it('should have the right title', () => {8 const title = browser.getTitle()9 console.log('Title was: ' + title)10 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')11 })12 it('should have the right title', () => {13 const title = browser.getTitle()14 console.log('Title was: ' + title)15 expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')16 })17})
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle();4 console.log('Title is: ' + title);5 });6 it('should have the right title', () => {7 const title = browser.getTitle();8 console.log('Title is: ' + title);9 });10 it('should have the right title', () => {11 const title = browser.getTitle();12 console.log('Title is: ' + title);13 });14 it('should have the right title', () => {15 const title = browser.getTitle();16 console.log('Title is: ' + title);17 });18 it('should have the right title', () => {19 const title = browser.getTitle();20 console.log('Title is: ' + title);21 });22 it('should have the right title', () => {23 const title = browser.getTitle();24 console.log('Title is: ' + title);25 });26 it('should have the right title', () => {27 const title = browser.getTitle();28 console.log('Title is: ' + title);29 });30 it('should have the right title', () => {31 const title = browser.getTitle();32 console.log('Title is: ' + title);
Using AI Code Generation
1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 var title = browser.getTitle();4 console.log('Title is: ' + title);5 });6});
Using AI Code Generation
1describe('WebdriverIO API Demos', function() {2 it('WebdriverIO API Demos', function() {3 browser.maximizeWindow();4 tagname.scrollIntoView();5 console.log('Tag Name is:'+tagname.getTagName());6 attribute.scrollIntoView();7 console.log('Attribute is:'+attribute.getAttribute('class'));8 cssproperty.scrollIntoView();9 console.log('Css Property is:'+cssproperty.getCSSProperty('color').parsed.hex);10 html.scrollIntoView();11 console.log('HTML is:'+html.getHTML());12 location.scrollIntoView();13 console.log('Location is:'+location.getLocation());14 size.scrollIntoView();15 console.log('Size is:'+size.getSize());16 text.scrollIntoView();17 console.log('Text is:'+text.getText());18 value.scrollIntoView();19 console.log('Value is:'+value.getValue());20 isdisplayed.scrollIntoView();21 console.log('IsDisplayed is:'+isdisplayed.isDisplayed());22 isenabled.scrollIntoView();23 console.log('Is
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.
Run Webdriverio 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?
