javascript/atoms/test/relative_locator_test.html - external/github.com/SeleniumHQ/selenium - Git at Google

 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>relative_locator_test.html</title>
 <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
 <script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
 <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
 <script src="test_bootstrap.js"></script>
 <script type="text/javascript">
   goog.require('bot.locators');
   goog.require('goog.array');
   goog.require('goog.dom');
 </script>

 <script type="text/javascript">
 var testFrame;
 var originalWindow;

 var TEST_PAGE_SOURCE = [
   '<!DOCTYPE html>',
   '<html><head>',
   '<style>',
   'table { text-align: center; border: solid; }',
   'td { border: solid; }',
   '#center { width: 100px; }',
   '#rectangles { position: relative; }',
   '#rectangles div { position: absolute; border: 1px solid black; height: 50px; width: 50px; }',
   '#a { left: 25px; top: 0; }',
   '#b { left: 78px; top: 30px; }',
   '#c { left: 131px; top: 60px; }',
   '#d { left: 0; top: 53px; }',
   '#e { left: 53px; top: 83px; }',
   '#f { left: 106px; top: 113px; }',
   '</style>',
   '</head><body>',
   '<h1>Relative Locator Tests</h1>',
   '<section id="paragraphs">',
   '  <p id="above">This text is above.</p>',
   '  <p id="mid">This is a paragraph of text in the middle.</p>',
   '  <p id="below">This text is below.</p>',
   '</section>',
   '<table>',
   '  <tr><td id="topLeft">1</td><td id="top">2</td><td id="topRight">3</td></tr>',
   '  <tr><td id="left">4</td><td id="center">5</td><td id="right">6</td></tr>',
   '  <tr><td id="bottomLeft">7</td><td id="bottom">8</td><td id="bottomRight">9</td></tr>',
   '</table>',
   '<section id="rectangles">',
   '  <div id="a">El-A</div>',
   '  <div id="b">El-B</div>',
   '  <div id="c">El-C</div>',
   '  <div id="d">El-D</div>',
   '  <div id="e">El-E</div>',
   '  <div id="f">El-F</div>',
   '</section>',
   '</body></html>'
 ].join('\n');

 for (const value of [
   'above', 'below', 'left', 'right', 'straightAbove', 'straightBelow', 'straightLeft', 'straightRight'
 ]) {
   window[value] = locator => ({kind: value, args: [locator]})
 }

 QUnit.begin(function() {
   testFrame = document.createElement('iframe');
   testFrame.setAttribute('width', 800);
   testFrame.setAttribute('height', 600);
   testFrame.setAttribute('id', 'testFrame');
   document.body.appendChild(testFrame);

   var win = goog.dom.getFrameContentWindow(testFrame);
   win.document.open();
   win.document.write(TEST_PAGE_SOURCE);
   win.document.close();

   originalWindow = bot.getWindow();
 });

 QUnit.testStart(function() {
   bot.setWindow(goog.dom.getFrameContentWindow(testFrame));
 });

 QUnit.testDone(function() {
   bot.setWindow(originalWindow);
 });

 QUnit.test('canFindAnElementUsingTheNormalFindElementCommand', function(assert) {
   const expected = bot.locators.findElements({tagName: 'p'});
   const found = bot.locators.findElements({relative: {root: {tagName: 'p'}, filters: []}});

   assert.ok(goog.array.equals(expected, found));
 });

 QUnit.test('canApplyFiltersToNarrowSetOfElementsFound', function(assert) {
   const midpoint = bot.locators.findElement({id: 'mid'});
   const found = bot.locators.findElements({relative: {root: {tagName: 'p'}, filters: [{kind: 'below', args: [midpoint]}]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'below');
 });

 QUnit.test('shouldFindElementsAboveOthers', function(assert) {
   const lowest = bot.locators.findElement({id: 'below'});
   const found = bot.locators.findElements({relative: {root: {'tag name': 'p'}, filters: [above(lowest)]}});

   assert.strictEqual(found.length, 2);
   assert.strictEqual(found[0].getAttribute('id'), 'mid');
   assert.strictEqual(found[1].getAttribute('id'), 'above');
 });

 QUnit.test('shouldFindElementsBelowOthers', function(assert) {
   const midpoint = bot.locators.findElement({id: 'mid'});
   const found = bot.locators.findElements({relative: {root: {tagName: 'p'}, filters: [below(midpoint)]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'below');
 });

 QUnit.test('shouldFindElementsAboveAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [above({id: 'center'})]}});

   assert.strictEqual(found.length, 3);
   assert.strictEqual(found[0].getAttribute('id'), 'top');
   assert.strictEqual(found[1].getAttribute('id'), 'topLeft');
   assert.strictEqual(found[2].getAttribute('id'), 'topRight');
 });

 QUnit.test('shouldFindElementsBelowAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [below({id: 'center'})]}});

   assert.strictEqual(found.length, 3);
   assert.strictEqual(found[0].getAttribute('id'), 'bottom');
   assert.strictEqual(found[1].getAttribute('id'), 'bottomLeft');
   assert.strictEqual(found[2].getAttribute('id'), 'bottomRight');
 });

 QUnit.test('shouldFindElementsLeftOfAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [left({id: 'center'})]}});

   assert.strictEqual(found.length, 3);
   assert.strictEqual(found[0].getAttribute('id'), 'left');
   assert.strictEqual(found[1].getAttribute('id'), 'topLeft');
   assert.strictEqual(found[2].getAttribute('id'), 'bottomLeft');
 });

 QUnit.test('shouldFindElementsRightOfAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [right({id: 'center'})]}});

   assert.strictEqual(found.length, 3);
   assert.strictEqual(found[0].getAttribute('id'), 'right');
   assert.strictEqual(found[1].getAttribute('id'), 'topRight');
   assert.strictEqual(found[2].getAttribute('id'), 'bottomRight');
 });

 QUnit.test('shouldFindElementStraightAboveAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightAbove({id: 'center'})]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'top');
 });

 QUnit.test('shouldFindElementStraightBelowAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightBelow({id: 'center'})]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'bottom');
 });

 QUnit.test('shouldFindElementStraightLeftOfAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightLeft({id: 'center'})]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'left');
 });

 QUnit.test('shouldFindElementStraightRightOfAnother', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightRight({id: 'center'})]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'right');
 });

 QUnit.test('shouldFindElementsNearEachOther', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [{kind: 'near', args: [{id: 'right'}]}]}});

   assert.strictEqual(found.length, 5);
   assert.strictEqual(found[0].getAttribute('id'), 'topRight');
   assert.strictEqual(found[1].getAttribute('id'), 'bottomRight');
   assert.strictEqual(found[2].getAttribute('id'), 'center');
   assert.strictEqual(found[3].getAttribute('id'), 'top');
   assert.strictEqual(found[4].getAttribute('id'), 'bottom');
 });

 QUnit.test('canCombineLocators', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [right({id: 'top'}), above({id: 'center'})]}});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'topRight');
 });

 QUnit.test('canCombineStraightLocators', function(assert) {
   const found = bot.locators.findElements({relative: {root: {tagName: 'td'},
     filters: [straightRight({id: 'bottomLeft'}), straightBelow({id: 'topRight'})]
   }});

   assert.strictEqual(found.length, 1);
   assert.strictEqual(found[0].getAttribute('id'), 'bottomRight');
 });

 QUnit.test('shouldNotRepeatElements', function(assert) {
   const base = bot.locators.findElement({id: 'e'});
   const found = bot.locators.findElements({relative: {root: {tagName: 'div'}, filters: [{kind: 'above', args: [base]}]}});

   assert.strictEqual(found.length, 2);
   assert.strictEqual(found[0].getAttribute('id'), 'b');
   assert.strictEqual(found[1].getAttribute('id'), 'a');
 });

 QUnit.test('shouldOrderNodesByProximity', function(assert) {
   const frame = document.createElement('iframe');
   const pageSource =
     '<head><title>iframe to hold the content</title>' +
     '<style>' +
     "#proxima1 {position: absolute;\n top: 310px;\n left: 230px;\n height: 40px;\n width: 40px;\n background-color: red;}\n" +
     "#proxima2 {position: absolute;\n top: 100px;\n left: 100px;\n height: 40px;\n width: 40px;\n background-color: green;}\n" +
     "#proxima3 {position: absolute;\n top: 150px;\n left: 310px;\n height: 40px;\n width: 40px;\n background-color: yellow;}\n" +
     "#proxima4 {position: absolute;\n top: 400px;\n left: 150px;\n height: 40px;\n width: 40px;\n background-color: blue;}\n" +
     '</style>' +
     '</head>' +
     "<div id=\"proxima1\">a</div>\n<div id=\"proxima2\">b</div>\n<div id=\"proxima3\">c</div>\n<div id=\"proxima4\">d</div>\n";
   frame.setAttribute('width', 640);
   frame.setAttribute('height', 480);
   document.body.appendChild(frame);

   const win = goog.dom.getFrameContentWindow(frame);
   win.document.documentElement.innerHTML = pageSource;

   try {
     bot.setWindow(goog.dom.getFrameContentWindow(frame));

     const red = bot.locators.findElement({id: 'proxima1'});
     const green = bot.locators.findElement({id: 'proxima2'});
     const yellow = bot.locators.findElement({id: 'proxima3'});
     const blue = bot.locators.findElement({id: 'proxima4'});

     const found = bot.locators.findElements({
       relative: {
         root: {tagName: 'div'},
         filters: [{kind: 'near', args: [red, 400]}]
       }
     })

     const expected = [blue, yellow, green];
     assert.strictEqual(found.length, expected.length);
     expected.forEach((element, index) => assert.strictEqual(found[index], element));
   } finally {
     bot.setWindow(goog.dom.getFrameContentWindow(testFrame));
   }
 });

 </script>
 </head>
 <body>
 <div id="qunit"></div>
 <div id="qunit-fixture"></div>
 </body>
 </html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>relative_locator_test.html</title>
	<link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
	<script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
	<script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
	<script src="test_bootstrap.js"></script>
	<script type="text/javascript">
	goog.require('bot.locators');
	goog.require('goog.array');
	goog.require('goog.dom');
	</script>

	<script type="text/javascript">
	var testFrame;
	var originalWindow;

	var TEST_PAGE_SOURCE = [
	'<!DOCTYPE html>',
	'<html><head>',
	'<style>',
	'table { text-align: center; border: solid; }',
	'td { border: solid; }',
	'#center { width: 100px; }',
	'#rectangles { position: relative; }',
	'#rectangles div { position: absolute; border: 1px solid black; height: 50px; width: 50px; }',
	'#a { left: 25px; top: 0; }',
	'#b { left: 78px; top: 30px; }',
	'#c { left: 131px; top: 60px; }',
	'#d { left: 0; top: 53px; }',
	'#e { left: 53px; top: 83px; }',
	'#f { left: 106px; top: 113px; }',
	'</style>',
	'</head><body>',
	'<h1>Relative Locator Tests</h1>',
	'<section id="paragraphs">',
	' <p id="above">This text is above.</p>',
	' <p id="mid">This is a paragraph of text in the middle.</p>',
	' <p id="below">This text is below.</p>',
	'</section>',
	'<table>',
	' <tr><td id="topLeft">1</td><td id="top">2</td><td id="topRight">3</td></tr>',
	' <tr><td id="left">4</td><td id="center">5</td><td id="right">6</td></tr>',
	' <tr><td id="bottomLeft">7</td><td id="bottom">8</td><td id="bottomRight">9</td></tr>',
	'</table>',
	'<section id="rectangles">',
	' <div id="a">El-A</div>',
	' <div id="b">El-B</div>',
	' <div id="c">El-C</div>',
	' <div id="d">El-D</div>',
	' <div id="e">El-E</div>',
	' <div id="f">El-F</div>',
	'</section>',
	'</body></html>'
	].join('\n');

	for (const value of [
	'above', 'below', 'left', 'right', 'straightAbove', 'straightBelow', 'straightLeft', 'straightRight'
	]) {
	window[value] = locator => ({kind: value, args: [locator]})
	}

	QUnit.begin(function() {
	testFrame = document.createElement('iframe');
	testFrame.setAttribute('width', 800);
	testFrame.setAttribute('height', 600);
	testFrame.setAttribute('id', 'testFrame');
	document.body.appendChild(testFrame);

	var win = goog.dom.getFrameContentWindow(testFrame);
	win.document.open();
	win.document.write(TEST_PAGE_SOURCE);
	win.document.close();

	originalWindow = bot.getWindow();
	});

	QUnit.testStart(function() {
	bot.setWindow(goog.dom.getFrameContentWindow(testFrame));
	});

	QUnit.testDone(function() {
	bot.setWindow(originalWindow);
	});

	QUnit.test('canFindAnElementUsingTheNormalFindElementCommand', function(assert) {
	const expected = bot.locators.findElements({tagName: 'p'});
	const found = bot.locators.findElements({relative: {root: {tagName: 'p'}, filters: []}});

	assert.ok(goog.array.equals(expected, found));
	});

	QUnit.test('canApplyFiltersToNarrowSetOfElementsFound', function(assert) {
	const midpoint = bot.locators.findElement({id: 'mid'});
	const found = bot.locators.findElements({relative: {root: {tagName: 'p'}, filters: [{kind: 'below', args: [midpoint]}]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'below');
	});

	QUnit.test('shouldFindElementsAboveOthers', function(assert) {
	const lowest = bot.locators.findElement({id: 'below'});
	const found = bot.locators.findElements({relative: {root: {'tag name': 'p'}, filters: [above(lowest)]}});

	assert.strictEqual(found.length, 2);
	assert.strictEqual(found[0].getAttribute('id'), 'mid');
	assert.strictEqual(found[1].getAttribute('id'), 'above');
	});

	QUnit.test('shouldFindElementsBelowOthers', function(assert) {
	const midpoint = bot.locators.findElement({id: 'mid'});
	const found = bot.locators.findElements({relative: {root: {tagName: 'p'}, filters: [below(midpoint)]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'below');
	});

	QUnit.test('shouldFindElementsAboveAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [above({id: 'center'})]}});

	assert.strictEqual(found.length, 3);
	assert.strictEqual(found[0].getAttribute('id'), 'top');
	assert.strictEqual(found[1].getAttribute('id'), 'topLeft');
	assert.strictEqual(found[2].getAttribute('id'), 'topRight');
	});

	QUnit.test('shouldFindElementsBelowAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [below({id: 'center'})]}});

	assert.strictEqual(found.length, 3);
	assert.strictEqual(found[0].getAttribute('id'), 'bottom');
	assert.strictEqual(found[1].getAttribute('id'), 'bottomLeft');
	assert.strictEqual(found[2].getAttribute('id'), 'bottomRight');
	});

	QUnit.test('shouldFindElementsLeftOfAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [left({id: 'center'})]}});

	assert.strictEqual(found.length, 3);
	assert.strictEqual(found[0].getAttribute('id'), 'left');
	assert.strictEqual(found[1].getAttribute('id'), 'topLeft');
	assert.strictEqual(found[2].getAttribute('id'), 'bottomLeft');
	});

	QUnit.test('shouldFindElementsRightOfAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [right({id: 'center'})]}});

	assert.strictEqual(found.length, 3);
	assert.strictEqual(found[0].getAttribute('id'), 'right');
	assert.strictEqual(found[1].getAttribute('id'), 'topRight');
	assert.strictEqual(found[2].getAttribute('id'), 'bottomRight');
	});

	QUnit.test('shouldFindElementStraightAboveAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightAbove({id: 'center'})]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'top');
	});

	QUnit.test('shouldFindElementStraightBelowAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightBelow({id: 'center'})]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'bottom');
	});

	QUnit.test('shouldFindElementStraightLeftOfAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightLeft({id: 'center'})]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'left');
	});

	QUnit.test('shouldFindElementStraightRightOfAnother', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [straightRight({id: 'center'})]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'right');
	});

	QUnit.test('shouldFindElementsNearEachOther', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [{kind: 'near', args: [{id: 'right'}]}]}});

	assert.strictEqual(found.length, 5);
	assert.strictEqual(found[0].getAttribute('id'), 'topRight');
	assert.strictEqual(found[1].getAttribute('id'), 'bottomRight');
	assert.strictEqual(found[2].getAttribute('id'), 'center');
	assert.strictEqual(found[3].getAttribute('id'), 'top');
	assert.strictEqual(found[4].getAttribute('id'), 'bottom');
	});

	QUnit.test('canCombineLocators', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'}, filters: [right({id: 'top'}), above({id: 'center'})]}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'topRight');
	});

	QUnit.test('canCombineStraightLocators', function(assert) {
	const found = bot.locators.findElements({relative: {root: {tagName: 'td'},
	filters: [straightRight({id: 'bottomLeft'}), straightBelow({id: 'topRight'})]
	}});

	assert.strictEqual(found.length, 1);
	assert.strictEqual(found[0].getAttribute('id'), 'bottomRight');
	});

	QUnit.test('shouldNotRepeatElements', function(assert) {
	const base = bot.locators.findElement({id: 'e'});
	const found = bot.locators.findElements({relative: {root: {tagName: 'div'}, filters: [{kind: 'above', args: [base]}]}});

	assert.strictEqual(found.length, 2);
	assert.strictEqual(found[0].getAttribute('id'), 'b');
	assert.strictEqual(found[1].getAttribute('id'), 'a');
	});

	QUnit.test('shouldOrderNodesByProximity', function(assert) {
	const frame = document.createElement('iframe');
	const pageSource =
	'<head><title>iframe to hold the content</title>' +
	'<style>' +
	"#proxima1 {position: absolute;\n top: 310px;\n left: 230px;\n height: 40px;\n width: 40px;\n background-color: red;}\n" +
	"#proxima2 {position: absolute;\n top: 100px;\n left: 100px;\n height: 40px;\n width: 40px;\n background-color: green;}\n" +
	"#proxima3 {position: absolute;\n top: 150px;\n left: 310px;\n height: 40px;\n width: 40px;\n background-color: yellow;}\n" +
	"#proxima4 {position: absolute;\n top: 400px;\n left: 150px;\n height: 40px;\n width: 40px;\n background-color: blue;}\n" +
	'</style>' +
	'</head>' +
	"<div id=\"proxima1\">a</div>\n<div id=\"proxima2\">b</div>\n<div id=\"proxima3\">c</div>\n<div id=\"proxima4\">d</div>\n";
	frame.setAttribute('width', 640);
	frame.setAttribute('height', 480);
	document.body.appendChild(frame);

	const win = goog.dom.getFrameContentWindow(frame);
	win.document.documentElement.innerHTML = pageSource;

	try {
	bot.setWindow(goog.dom.getFrameContentWindow(frame));

	const red = bot.locators.findElement({id: 'proxima1'});
	const green = bot.locators.findElement({id: 'proxima2'});
	const yellow = bot.locators.findElement({id: 'proxima3'});
	const blue = bot.locators.findElement({id: 'proxima4'});

	const found = bot.locators.findElements({
	relative: {
	root: {tagName: 'div'},
	filters: [{kind: 'near', args: [red, 400]}]
	}
	})

	const expected = [blue, yellow, green];
	assert.strictEqual(found.length, expected.length);
	expected.forEach((element, index) => assert.strictEqual(found[index], element));
	} finally {
	bot.setWindow(goog.dom.getFrameContentWindow(testFrame));
	}
	});

	</script>
	</head>
	<body>
	<div id="qunit"></div>
	<div id="qunit-fixture"></div>
	</body>
	</html>