How to use ensureRectangleInsideElement method in Testcafe

Best JavaScript code snippet using testcafe

index.js

Source:index.js

...4373    var styleUtils$5 = testCafeCore__default.styleUtils;4374    var contentEditable$2 = testCafeCore__default.contentEditable;4375    var arrayUtils$1 = testCafeCore__default.arrayUtils;4376    var MODIFIERS_LIST = ['direction', 'font-family', 'font-size', 'font-size-adjust', 'font-variant', 'font-weight', 'font-style', 'letter-spacing', 'line-height', 'text-align', 'text-indent', 'text-transform', 'word-wrap', 'word-spacing', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'border-top-width', 'border-left-width', 'border-right-width', 'border-bottom-width'];4377    function ensureRectangleInsideElement(element, rect) {4378        var elementBorders = styleUtils$5.getBordersWidth(element);4379        var elementOffset = positionUtils$3.getOffsetPosition(element);4380        // NOTE: strange behavior in Chrome - for some elements (e.g., for the 'font' element)4381        // scrollHeight is 0, so we use getBoundingClientRect4382        var elementHeight = element.scrollHeight || element.getBoundingClientRect().height;4383        var left = Math.ceil(rect.left);4384        var top = Math.ceil(rect.top);4385        var bottom = Math.floor(rect.bottom);4386        if (!domUtils$a.isTextAreaElement(element)) {4387            var clientOffset = positionUtils$3.offsetToClientCoords({4388                x: elementOffset.left,4389                y: elementOffset.top4390            });4391            var minLeft = clientOffset.x + elementBorders.left + 1;4392            var minTop = clientOffset.y + elementBorders.top + 1;4393            var bottomBound = clientOffset.y + elementBorders.top + elementBorders.bottom + elementHeight;4394            var maxBottom = clientOffset.y + elementBorders.top + elementHeight - 1;4395            left = Math.ceil(left <= clientOffset.x ? minLeft : rect.left);4396            top = Math.ceil(top <= clientOffset.y ? minTop : rect.top);4397            bottom = Math.floor(bottom >= bottomBound ? maxBottom : rect.bottom);4398        }4399        return {4400            left: left,4401            top: top,4402            bottom: bottom4403        };4404    }4405    function getAbsoluteRect(rect) {4406        var documentScroll = styleUtils$5.getElementScroll(document);4407        return {4408            left: rect.left + documentScroll.left,4409            top: rect.top + documentScroll.top,4410            bottom: rect.bottom + documentScroll.top4411        };4412    }4413    function getSelectionRectangleInContentEditableElement(element, position) {4414        var range = domUtils$a.findDocument(element).createRange();4415        var selectionPosition = contentEditable$2.calculateNodeAndOffsetByPosition(element, position);4416        range.setStart(selectionPosition.node, Math.min(selectionPosition.offset, selectionPosition.node.length));4417        range.setEnd(selectionPosition.node, Math.min(selectionPosition.offset, selectionPosition.node.length));4418        return range.getClientRects()[0];4419    }4420    function getTextSelectionRectangle(element, position) {4421        var range = element.createTextRange();4422        range.collapse(true);4423        range.moveStart('character', position);4424        range.moveEnd('character', position);4425        range.collapse(true);4426        return range.getBoundingClientRect();4427    }4428    function getSelectionRectangle(element, position) {4429        var clientRectBeforeFakeDiv = element.getBoundingClientRect();4430        var fakeDiv = createFakeDiv(element);4431        var rect = null;4432        var clientRectAfterFakeDiv = element.getBoundingClientRect();4433        var topBoundDiff = clientRectAfterFakeDiv.top - clientRectBeforeFakeDiv.top;4434        var leftBoundDiff = clientRectAfterFakeDiv.left - clientRectBeforeFakeDiv.left;4435        var valueLength = domUtils$a.getElementValue(element).length;4436        try {4437            var range = document.createRange(); //B2547234438            range.setStart(hammerhead__default.nativeMethods.nodeFirstChildGetter.call(fakeDiv), Math.min(position, valueLength));4439            // NOTE: The range.getClientRects function returns wrong result if range length is 0 in Safari 114440            range.setEnd(hammerhead__default.nativeMethods.nodeFirstChildGetter.call(fakeDiv), Math.min(position + 1, valueLength + 1));4441            if (domUtils$a.isTextAreaElement(element)) {4442                rect = range.getBoundingClientRect();4443                if (rect.width === 0 && rect.height === 0)4444                    rect = range.getClientRects()[0];4445            }4446            else4447                rect = range.getClientRects()[0];4448        }4449        catch (err) {4450            rect = null;4451        }4452        domUtils$a.remove(fakeDiv);4453        if (!rect)4454            return null;4455        return {4456            width: rect.width,4457            height: rect.height,4458            top: rect.top - topBoundDiff,4459            bottom: rect.bottom - topBoundDiff,4460            left: rect.left - leftBoundDiff,4461            right: rect.right - leftBoundDiff4462        };4463    }4464    function createFakeDiv(element) {4465        var body = document.body;4466        var elementOffset = positionUtils$3.getOffsetPosition(element);4467        var elementMargin = styleUtils$5.getElementMargin(element);4468        var elementTop = elementOffset.top - elementMargin.top;4469        var elementLeft = elementOffset.left - elementMargin.left;4470        var fakeDiv = document.createElement('div');4471        var fakeDivCssStyles = 'white-space:pre-wrap;border-style:solid;';4472        if (styleUtils$5.get(body, 'position') === 'absolute') {4473            var bodyMargin = styleUtils$5.getElementMargin(body);4474            var bodyLeft = styleUtils$5.get(body, 'left');4475            var bodyTop = styleUtils$5.get(body, 'top');4476            elementLeft -= bodyMargin.left + (parseInt(bodyLeft.replace('px', ''), 10) || 0);4477            elementTop -= bodyMargin.top + (parseInt(bodyTop.replace('px', ''), 10) || 0);4478        }4479        arrayUtils$1.forEach(MODIFIERS_LIST, function (modifier) {4480            fakeDivCssStyles += modifier + ":" + styleUtils$5.get(element, modifier) + ";";4481        });4482        styleUtils$5.set(fakeDiv, {4483            cssText: fakeDivCssStyles,4484            position: 'absolute',4485            left: elementLeft + 'px',4486            top: elementTop + 'px',4487            width: element.scrollWidth + 'px',4488            height: element.scrollHeight + 'px'4489        });4490        hammerhead__default.nativeMethods.nodeTextContentSetter.call(fakeDiv, domUtils$a.getElementValue(element) + ' ');4491        body.appendChild(fakeDiv);4492        return fakeDiv;4493    }4494    function getPositionCoordinates(element, position) {4495        var rect = null;4496        if (domUtils$a.isContentEditableElement(element))4497            rect = getSelectionRectangleInContentEditableElement(element, position);4498        else if (typeof element.createTextRange === 'function')4499            rect = getTextSelectionRectangle(element, position);4500        else4501            rect = getSelectionRectangle(element, position);4502        if (!rect)4503            return null;4504        rect = ensureRectangleInsideElement(element, rect);4505        rect = getAbsoluteRect(rect);4506        return {4507            x: rect.left,4508            y: Math.floor(rect.top + (rect.bottom - rect.top) / 2)4509        };4510    }4511    function getSelectionCoordinatesByPosition(element, position) {4512        var isTextEditable = domUtils$a.isTextEditableElement(element);4513        var isContentEditable = domUtils$a.isContentEditableElement(element);4514        var hasText = isTextEditable && domUtils$a.getElementValue(element).length > 0 ||4515            isContentEditable && contentEditable$2.getContentEditableValue(element).length;4516        if (!hasText)4517            return positionUtils$3.findCenter(element);4518        return getPositionCoordinates(element, position);4519    }4520    function getSelectionCoordinatesByNodeAndOffset(element, node, offset) {4521        var range = domUtils$a.findDocument(element).createRange();4522        range.setStart(node, Math.min(offset, node.length));4523        range.setEnd(node, Math.min(offset, node.length));4524        var rect = range.getClientRects()[0];4525        if (!rect)4526            return null;4527        rect = ensureRectangleInsideElement(element, rect);4528        rect = getAbsoluteRect(rect);4529        return {4530            x: rect.left,4531            y: Math.floor(rect.top + (rect.bottom - rect.top) / 2)4532        };4533    }4534    function getLastVisibleSelectionPosition(element, startPos, endPos) {4535        var backward = startPos > endPos;4536        var inc = backward ? 1 : -1;4537        var currentPos = endPos;4538        var currentPoint = null;4539        while (currentPos !== startPos) {4540            currentPos += inc;4541            currentPoint = getPositionCoordinates(element, currentPos);...

utils.js

Source:utils.js

...118    else119        rect = getSelectionRectangle(element, position);120    if (!rect)121        return null;122    rect = ensureRectangleInsideElement(element, rect);123    rect = getAbsoluteRect(rect);124    return {125        x: rect.left,126        y: Math.floor(rect.top + (rect.bottom - rect.top) / 2)127    };128}129export function getSelectionCoordinatesByPosition (element, position) {130    var isTextEditable    = domUtils.isTextEditableElement(element);131    var isContentEditable = domUtils.isContentEditableElement(element);132    var hasText           = isTextEditable && element.value.length > 0 ||133                            isContentEditable && contentEditable.getContentEditableValue(element).length;134    if (!hasText)135        return positionUtils.findCenter(element);136    return getPositionCoordinates(element, position);137}138export function getSelectionCoordinatesByNodeAndOffset (element, node, offset) {139    var range = domUtils.findDocument(element).createRange();140    range.setStart(node, Math.min(offset, node.length));141    range.setEnd(node, Math.min(offset, node.length));142    var rect = range.getClientRects()[0];143    if (!rect)144        return null;145    rect = ensureRectangleInsideElement(element, rect);146    rect = getAbsoluteRect(rect);147    return {148        x: rect.left,149        y: Math.floor(rect.top + (rect.bottom - rect.top) / 2)150    };151}152export function getLastVisibleSelectionPosition (element, startPos, endPos) {153    var backward     = startPos > endPos;154    var inc          = backward ? 1 : -1;155    var currentPos   = endPos;156    var currentPoint = null;157    while (currentPos !== startPos) {158        currentPos += inc;159        currentPoint = getPositionCoordinates(element, currentPos);...

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3    const element = Selector('#developer-name');4        .typeText(element, 'Peter Parker')5        .click('#tried-test-cafe')6        .click('#submit-button')7        .expect(Selector('#article-header').innerText).eql('Thank you, Peter Parker!');8});9import { Selector } from 'testcafe';10test('My first test', async t => {11    const element = Selector('#developer-name');12        .typeText(element, 'Peter Parker')13        .click('#tried-test-cafe')14        .click('#submit-button')15        .expect(Selector('#article-header').innerText).eql('Thank you, Peter Parker!');16});17import { Selector } from 'testcafe';18test('My first test', async t => {19    const element = Selector('#developer-name');20        .typeText(element, 'Peter Parker')21        .click('#tried-test-cafe')22        .click('#submit-button')23        .expect(Selector('#article-header').innerText).eql('Thank you, Peter Parker!');24});25import { Selector } from 'testcafe';26test('My first test', async t => {27    const element = Selector('#developer-name');28        .typeText(element, 'Peter Parker')29        .click('#tried-test-cafe')30        .click('#submit-button')31        .expect(Selector('#article-header').innerText).eql('Thank you, Peter Parker!');32});33import { Selector } from 'testcafe';34test('My first test', async t => {35    const element = Selector('#developer-name');36        .typeText(element, 'Peter Parker')37        .click('#tried-test-cafe')38        .click('#submit-button')

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3    const element = Selector('#slider');4        .click(element)5        .drag('#slider', 360, 0, { offsetX: 10, offsetY: 10 });6});7import { Selector } from 'testcafe';8test('My first test', async t => {9    const element = Selector('#slider');10        .drag('#slider', 360, 0, { offsetX: 10, offsetY: 10 })11        .click(element);12});13import { Selector } from 'testcafe';14test('My first test', async t => {15    const element = Selector('#slider');16        .drag('#slider', 360, 0, { offsetX: 10, offsetY: 10 })17        .click(element);18});19import { Selector } from 'testcafe';20test('My first test', async t => {21    const element = Selector('#slider');22        .drag('#slider', 360, 0, { offsetX: 10, offsetY: 10 })23        .click(element);24});25import { Selector } from 'testcafe';26test('My first test', async t => {27    const element = Selector('#slider');28        .drag('#slider', 360, 0, { offsetX: 10, offsetY: 10 })29        .click(element);30});

Using AI Code Generation

1import { ClientFunction } from 'testcafe';2test('My first test', async t => {3  const ensureRectangleInsideElement = ClientFunction((selector, rect) => {4    const element = document.querySelector(selector);5    const elementRect = element.getBoundingClientRect();6    return (7    );8  });9  const elementRect = await ensureRectangleInsideElement('#developer-name', {10  });11  await t.expect(elementRect).ok();12});13const ensureRectangleInsideElement = ClientFunction(new Function('selector', 'rect', `14    const element = document.querySelector(selector);15    const elementRect = element.getBoundingClientRect();16    return (17    );18`));

Using AI Code Generation

1import { ClientFunction } from 'testcafe';2const ensureRectangleInsideElement = ClientFunction((element, rectangle) => {3    const elementRect = element.getBoundingClientRect();4           rectangle.right <= elementRect.right;5});6test('test', async t => {7    const element = await t.select('#developer-name');8    const rectangle = await element.getBoundingClientRect();9    await t.expect(ensureRectangleInsideElement(element, rectangle)).ok();10});11import { ClientFunction } from 'testcafe';12const ensureRectangleInsideElement = ClientFunction((element, rectangle) => {13    const elementRect = element.getBoundingClientRect();14           rectangle.right <= elementRect.right;15});16test('test', async t => {17    const element = await t.select('#developer-name');18    const rectangle = await element.getBoundingClientRect();19    await t.expect(ensureRectangleInsideElement(element, rectangle)).ok();20});21test('test', async t => {22    const element = await t.select('#developer-name');23    const rectangle = await element.getBoundingClientRect();24    await t.expect(ensureRectangleInsideElement(element, rectangle)).ok();25});26Your name to display (optional):27Your name to display (optional):28const getComputedStyle = ClientFunction((element, property) => {29    return window.getComputedStyle(element)[property];30});31const element = await t.select('.myclass');32const propertyValue = await getComputedStyle(element, 'font-size');

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Ensure Rectangle Inside Element', async t => {3        .resizeWindow(800, 600)4        .click(Selector('button').withText('Click me'))5        .wait(5000)6        .takeScreenshot()7        .ensureRectangleInsideElement(Selector('.rectangle'), 0, 0, 100, 100);8});9import { Selector } from 'testcafe';10test('Ensure Element Inside Element', async t => {11        .resizeWindow(800, 600)12        .click(Selector('button').withText('Click me'))13        .wait(5000)14        .takeScreenshot()15        .ensureElementInsideElement(Selector('.rectangle'), Selector('.rectangle'));16});17import { Selector } from 'testcafe';18test('Ensure Element Not Inside Element', async t => {19        .resizeWindow(800, 600)20        .click(Selector('button').withText('Click me'))21        .wait(5000)22        .takeScreenshot()23        .ensureElementNotInsideElement(Selector('.rectangle'), Selector('.rectangle'));24});25import { Selector } from 'testcafe';26test('Ensure Element Not Inside Element', async t => {27        .resizeWindow(800, 600)28        .click(Selector('button').withText('Click me'))29        .wait(5000)30        .takeScreenshot()31        .ensureElementNotInsideElement(Selector('.rectangle'), Selector('.rectangle'));32});33import { Selector } from 'testcafe';

Using AI Code Generation

1import { Selector } from 'testcafe';2test('Ensure Rectangle Inside Element', async t => {3    const button = Selector('#submit-button');4        .expect(button.visible).ok()5        .expect(button.getBoundingClientRectProperty('width')).gt(0)6        .expect(button.getBoundingClientRectProperty('height')).gt(0)7        .expect(button.getBoundingClientRectProperty('top')).gt(0)8        .expect(button.getBoundingClientRectProperty('left')).gt(0)9        .expect(button.getBoundingClientRectProperty('bottom')).lt(100)10        .expect(button.getBoundingClientRectProperty('right')).lt(100);11});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.