How to use getElementRect method in Webdriverio
Best JavaScript code snippet using webdriverio-monorepo
mngCoverup.directive.js
Source:mngCoverup.directive.js 
...55 // If the parent is positioned, it's height and width are simply 100%56 // Otherwise need to calculate the dimensions and positioning.57 if (!isPositioned(parent)) {58 // Place in the current context59 placeContainer(container, getElementRect(parent));60 // Replace when all images are loaded - FIXME - on each...61 waitForChildImages(scope, parent)62 .then(function () {63 placeContainer(container, getElementRect(parent));64 });65 scope.$watch(66 function () {67 return getElementRect(parent);68 },69 function (newSize) {70 placeContainer(container, newSize);71 },72 true /* deep compare */73 );74 }75 // Changes to either the content or the container size will make the placement change76 // to keep the content centered.77 if ( scope.centeredVertical || scope.centeredHorizontal ) {78 scope.$watch(79 function () {80 return {81 container : getElementRect(container),82 content : getElementRect(content)83 };84 },85 function (newObj) {86 placeContent(scope, content, newObj.container, newObj.content);87 },88 true /* Deep compare */89 );90 }91 else {92 // the watch isn't added if the content isn't centered, so place here once.93 var containerRect = getElementRect(container),94 contentRect = getElementRect(content);95 placeContent(scope, content, containerRect, contentRect);96 }97 return;98 }99 /*100 * Setup necessary scope properties with default values101 */102 function setDefaults (scope) {103 // if neither centered-horizontal nor centered-vertical,104 // then check if the centered attribute is set and use that.105 if ( scope.centeredHorizontal === undefined && scope.centeredVertical === undefined ) {106 if ( scope.centered === undefined || scope.centered ) {107 scope.centeredHorizontal = true;108 scope.centeredVertical = true;...
getElementRect.spec.js
Source:getElementRect.spec.js
1const assert = require('assert')2const {getElementRect} = require('../dist/index')3describe('getElementRect', () => {4 const url = 'https://applitools.github.io/demo/TestPages/SnippetsTestPage/'5 describe('chrome', () => {6 let page7 before(async function() {8 page = await global.getDriver('chrome')9 if (!page) {10 this.skip()11 }12 })13 it('return static element client rect', async () => {14 await page.goto(url)15 const element = await page.$('#static')16 const offset = await page.evaluate(getElementRect, [element, true])17 assert.deepStrictEqual(offset, {x: 303, y: 3, width: 294, height: 294})18 })19 it('return static element rect', async () => {20 await page.goto(url)21 const element = await page.$('#static')22 const offset = await page.evaluate(getElementRect, [element])23 assert.deepStrictEqual(offset, {x: 300, y: 0, width: 300, height: 300})24 })25 it('return fixed element rect', async () => {26 await page.goto(url)27 const element = await page.$('#fixed')28 await page.evaluate(() => scrollTo(500, 500))29 const offset = await page.evaluate(getElementRect, [element])30 assert.deepStrictEqual(offset, {x: 500, y: 300, width: 300, height: 300})31 })32 it('return fixed element child rect', async () => {33 await page.goto(url)34 const element = await page.$('#fixed-child')35 await page.evaluate(() => scrollTo(500, 500))36 const offset = await page.evaluate(getElementRect, [element])37 assert.deepStrictEqual(offset, {x: 530, y: 330, width: 240, height: 240})38 })39 })40 for (const name of ['internet explorer', 'ios safari']) {41 const expectedRects = {42 'internet explorer': {43 fixed: {x: 483, y: 283, width: 300, height: 300},44 child: {x: 513, y: 313, width: 240, height: 240},45 },46 'ios safari': {47 fixed: {x: 75, y: 335, width: 300, height: 300},48 child: {x: 105, y: 365, width: 240, height: 240},49 },50 }51 describe(name, () => {52 let driver53 before(async function() {54 driver = await global.getDriver(name)55 if (!driver) {56 this.skip()57 }58 })59 it('return static element client rect', async () => {60 await driver.url(url)61 const element = await driver.$('#static')62 const offset = await driver.execute(getElementRect, [element, true])63 assert.deepStrictEqual(offset, {x: 303, y: 3, width: 294, height: 294})64 })65 it('return static element rect', async () => {66 await driver.url(url)67 const element = await driver.$('#static')68 const offset = await driver.execute(getElementRect, [element])69 assert.deepStrictEqual(offset, {x: 300, y: 0, width: 300, height: 300})70 })71 it('return fixed element rect', async () => {72 await driver.url(url)73 const element = await driver.$('#fixed')74 await driver.execute('scrollTo(500, 500)')75 const offset = await driver.execute(getElementRect, [element])76 assert.deepStrictEqual(offset, expectedRects[name].fixed)77 })78 it('return fixed element child rect', async () => {79 await driver.url(url)80 const element = await driver.$('#fixed-child')81 await driver.execute('scrollTo(500, 500)')82 const offset = await driver.execute(getElementRect, [element])83 assert.deepStrictEqual(offset, expectedRects[name].child)84 })85 })86 }...
test-responsive.js
Source:test-responsive.js
...36 it('should layout correctly initially', async() => {37 const firstSlide = await getSlide(controller, 0);38 await waitForCarouselImg(controller, 0);39 // 3 slides width width 1000 = 333 width per slide.40 await expect(controller.getElementRect(firstSlide)).to.include({41 width: 333,42 x: 0,43 });44 });45 it('should layout correctly after resize', async() => {46 const firstSlide = await getSlide(controller, 0);47 await waitForCarouselImg(controller, 0);48 await controller.setWindowRect({49 width: 600,50 height: 600,51 });52 // 2 slides width width 600 = 300 width per slide.53 await expect(controller.getElementRect(firstSlide)).to.include({54 width: 300,55 x: 0,56 });57 });58 it('should retain position when changing the visible count', async() => {59 const el = await getScrollingElement(controller);60 const secondSlide = await getSlide(controller, 1);61 await controller.scroll(el, {left: 333});62 await expect(prop(el, 'scrollLeft')).to.equal(333);63 await controller.setWindowRect({64 width: 600,65 height: 600,66 });67 await expect(controller.getElementRect(secondSlide)).to.include({x: 0});68 });69 it('should respond to attribute changes', async() => {70 const firstSlide = await getSlide(controller, 0);71 // 3 slides width width 1000 = 333 width per slide.72 await expect(controller.getElementRect(firstSlide)).to.include({73 width: 333,74 x: 0,75 });76 // Switch over to `visible-count="(min-width: 650px) 5, 4".77 const btn = await controller.findElement('#responsive-5-4');78 await controller.click(btn);79 // 5 slides width width 1000 = 200 width per slide80 await expect(controller.getElementRect(firstSlide)).to.include({81 width: 200,82 x: 0,83 });84 // Now make sure new media query is active.85 await controller.setWindowRect({86 width: 600,87 height: 600,88 });89 // 4 slides width width 600 = 150 width per slide.90 await expect(controller.getElementRect(firstSlide)).to.include({91 width: 150,92 x: 0,93 });94 });...
getElementRect.js
Source:getElementRect.js
...9 *10 * @example11 * module.exports = {12 * demoTest(browser) {13 * browser.getElementRect('#login', function(result) {14 * console.log('result', result);15 * });16 *17 * // with explicit locate strategy18 * browser.getElementRect('css selector', '#login', function(result) {19 * console.log('result', result);20 * });21 *22 * // with selector object - see https://nightwatchjs.org/guide#element-properties23 * browser.getElementRect({24 * selector: '#login',25 * index: 1,26 * suppressNotFoundErrors: true27 * }, function(result) {28 * console.log('result', result);29 * });30 * },31 *32 * demoTestAsync: async function(browser) {33 * const result = await browser.getElementRect('#login');34 * console.log('classList', result);35 * }36 * }37 *38 * @method getElementRect39 * @syntax .getElementRect(selector, callback)40 * @syntax .getElementRect(using, selector, callback)41 * @param {string} [using] The locator strategy to use. See [W3C Webdriver - locator strategies](https://www.w3.org/TR/webdriver/#locator-strategies)42 * @param {string|object} selector The selector (CSS/Xpath) used to locate the element. Can either be a string or an object which specifies [element properties](https://nightwatchjs.org/guide#element-properties).43 * @param {function} callback Callback function which is called with the result value.44 * @returns {{width: number, height: number}} The width and height of the element in pixels45 * @link /#dfn-get-element-rect46 * @api protocol.elementstate47 */48class GetElementRect extends BaseElementCommand {49 get extraArgsCount() {50 return 0;51 }52 get elementProtocolAction() {53 return 'getElementRect';54 }...
test-rtl.js
Source:test-rtl.js
...20 controller = env.controller;21 });22 it('should place the second slide to the left', async () => {23 const secondSlide = await getSlide(controller, 1);24 await expect(controller.getElementRect(secondSlide)).to.include({25 left: -pageWidth,26 });27 });28 it('should place the last slide to the right', async () => {29 const lastSlide = await getSlide(controller, SLIDE_COUNT - 1);30 await expect(controller.getElementRect(lastSlide)).to.include({31 left: pageWidth,32 });33 });34 it('should place the arrows correctly', async () => {35 const prevArrow = await getPrevArrow(controller);36 const nextArrow = await getNextArrow(controller);37 // TODO(sparhami) seems like it would be better to modify getElementRect38 // to return us the right coordinate as well like DomRect.39 await expect(controller.getElementRect(prevArrow)).to.include({40 right: pageWidth - arrowMargin,41 });42 await expect(controller.getElementRect(nextArrow)).to.include({43 left: arrowMargin,44 });45 });46 }...
TooltipForwared.js
Source:TooltipForwared.js
...78export const Tooltip = React.forwardRef(({ children, ...props }, ref) => {9 const targetRef = useRef(null);1011 const handleMouseEnter = () => console.log(getElementRect(targetRef.current));12 const handleMouseLeave = () => console.log(getElementRect(targetRef.current));1314 const getElementRect = (el) => {15 return el.getBoundingClientRect();16 };1718 useEffect(() => {19 console.log(getElementRect(targetRef.current), "render");20 }, []);2122 return (23 <>24 {React.cloneElement(children, {25 onMouseEnter: handleMouseEnter,26 onMouseLeave: handleMouseLeave,27 ref: targetRef28 })}29 <Portal>30 <div className="tooltip">{props.content}</div>31 </Portal>32 </>33 );
...
getElementPosition.js
Source:getElementPosition.js
...15 * @param {DOMElement} element16 * @return {object}17 */18function getElementPosition(element) {19 var rect = getElementRect(element);20 return {21 x: rect.left,22 y: rect.top,23 width: rect.right - rect.left,24 height: rect.bottom - rect.top25 };26}...
get-element-rect.js
Source:get-element-rect.js
1import Endpoint from '..'2class GetElementRect extends Endpoint {3 static create (req) {4 return new GetElementRect([req.params.id])5 }6}7GetElementRect.method = 'get'8GetElementRect.url = '/session/:sid/element/:id/rect'...
Using AI Code Generation
1const {remote} = require('webdriverio');2(async () => {3 const browser = await remote({4 capabilities: {5 }6 })7 const element = await browser.$('#getelementrect')8 const rect = await element.getElementRect()9 console.log(rect)10 await browser.deleteSession()11})().catch((e) => console.error(e))
Using AI Code Generation
1var webdriverio = require('webdriverio');2var assert = require('assert');3var options = { desiredCapabilities: { browserName: 'chrome' } };4var client = webdriverio.remote(options);5 .init()6 .click('#lst-ib')7 .keys('WebdriverIO')8 .click('#tsf > div.tsf-p > div.jsb > center > input[type="submit"]:nth-child(1)')9 .getTitle().then(function(title) {10 console.log('Title was: ' + title);11 })12 .getElementRect('#rso > div:nth-child(1) > div > div > div > div > h3 > a').then(function(rect) {13 console.log(rect);14 })15 .end();
Using AI Code Generation
1const { remote } = require('webdriverio');2(async () => {3 const browser = await remote({4 capabilities: {5 'goog:chromeOptions': {6 }7 }8 })9 const title = await browser.getTitle()10 console.log('Title was: ' + title)11 const element = await browser.$('#mainContent')12 const rect = await element.getElementRect()13 console.log(rect)14 await browser.deleteSession()15})().catch((e) => console.error(e))
Using AI Code Generation
1describe('Get Element Rect', () => {2 it('Get Element Rect', () => {3 const elementRect = element.getElementRect('width');4 console.log(elementRect);5 });6});
Using AI Code Generation
1describe('WebdriverIO', () => {2 it('should get element rect', async () => {3 const elem = await $('#elementId');4 const rect = await elem.getElementRect();5 console.log(rect.x);6 console.log(rect.y);7 console.log(rect.width);8 console.log(rect.height);9 });10});
Using AI Code Generation
1describe('Test to check the element position', function() {2 it('should get the position of the element', function() {3 console.log('The position of the element is x: ' + x + ' and y: ' + y);4 console.log('The width of the element is: ' + width);5 console.log('The height of the element is: ' + height);6 });7});
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?
