Skip to content

Commit

Permalink
Check for elements ClientRects length also to determine element visib…
Browse files Browse the repository at this point in the history 
…ility. #652
  • Loading branch information
@negiDharmendra @NivedhaSenthil
negiDharmendra authored and NivedhaSenthil committed Jun 27, 2019
1 parent bab7a1b commit 765f95a
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 49 deletions.
5 changes: 3 additions & 2 deletions lib/taiko.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2758,8 +2758,9 @@ const filter_visible_nodes = async (nodeIds) => {
let visible_nodes = [];

function isHidden() {
if (this.nodeType === Node.TEXT_NODE) return this.parentElement.offsetHeight <= 0 && this.parentElement.offsetWidth <= 0;
return this.offsetHeight <= 0 && this.offsetWidth <= 0;
let elem = this;
if (this.nodeType === Node.TEXT_NODE) elem = this.parentElement;
return !(elem.offsetHeight || elem.offsetWidth || elem.getClientRects().length);
}

for (const nodeId of nodeIds) {
Expand Down
144 changes: 97 additions & 47 deletions test/unit-tests/textMatch.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,58 +8,90 @@ describe('match', () => {

describe('text match', () => {
before(async () => {
let innerHtml = '<div>' +
//text node exists
'<div>' +
'<div name="text_node">' +
'User name: <input type="text" name="uname">' +
'</div>' +
'<div name="value_or_type_of_field_as_text">' +
'<input type="button" value="click me">' +
'<input type="submit">' +
'</div>' +
'<div name="text_across_element">' +
'<div>Text <span>Across</span> Element</div>' +
'</div>' +
'<div id="inTop" name="text_same_as_iframe" style="display: none">' +
'Text in iframe' +
'</div>' +
'<iframe></iframe>' +
'<script>' +
'document.querySelector("iframe").contentDocument.write("<div id=\\"inIframe\\">Text in iframe</div>");' +
'document.querySelector("iframe").contentDocument.close();'+
'</script>' +
// same text node in page
'<div><p>Sign up</p></div>' +
'<div><p>By clicking “Sign up for GitHub”</p></div>' +
'<span>Sign up for GitHub<span>' +
//text node in different tags
'<div>create account</div>' +
'<div>By clicking “create account in GitHub”</div>' +
'<a href="github.com">create account</a>' +
'<a href="github.com">create account now</a>' +
'<button class="button" type="submit">create account</button>' +
'<button class="button" type="submit">create account in GitHub</button>' +
//text node with input tag
'<input type="text" value="password" />' +
'<input type="text" value="Enter password" />' +
//text node with value
'<p>taiko demo</p>' +
'<input type="text" value="taiko demo" />' +
'<p>Enter name for taiko demo</p>' +
'<input type="text" value="Enter name for taiko demo" />' +
//text node with type
'<p>this is text</p>' +
'<input type="text" value="user name" />' +
'<p>Enter user name in textbox</p>' +
'<input type="text" value="Enter user name" />' +
'</div>';
let innerHtml = `
<div>
<!-- //text node exists -->
<div>
<div name="text_node">
User name: <input type="text" name="uname">
</div>
<div name="value_or_type_of_field_as_text">
<input type="button" value="click me">
<input type="submit">
</div>
<div name="text_across_element">
<div>Text <span>Across</span> Element</div>
</div>
<div id="inTop" name="text_same_as_iframe" style="display: none">
Text in iframe
</div>
<iframe></iframe>
<script>
document.querySelector("iframe").contentDocument.write('<div id="inIframe">Text in iframe</div>');
document.querySelector("iframe").contentDocument.close();
</script>
<!-- // same text node in page -->
<div>
<p>Sign up</p>
</div>
<div>
<p>By clicking “Sign up for GitHub”</p>
</div>
<span>Sign up for GitHub<span>
<!-- //text node in different tags -->
<div>create account</div>
<div>By clicking “create account in GitHub”</div>
<a href="github.com">create account</a>
<a href="github.com">create account now</a>
<button class="button" type="submit">create account</button>
<button class="button" type="submit">create account in GitHub</button>
<!-- //text node with input tag -->
<input type="text" value="password" />
<input type="text" value="Enter password" />
<!-- //text node with value -->
<p>taiko demo</p>
<input type="text" value="taiko demo" />
<p>Enter name for taiko demo</p>
<input type="text" value="Enter name for taiko demo" />
<!-- //text node with type -->
<p>this is text</p>
<input type="text" value="user name" />
<p>Enter user name in textbox</p>
<input type="text" value="Enter user name" />
</div>
<div >
<h1>Elements visibility</h1>
<div>
<p>Visible content</p>
</div>
<div style="display:none">
<p>Parent element has display none</p>
</div>
<div>
<p style="display:none">Element it self has display none</p>
</div>
<div style="display:inline">
<p>
With 'display: inline', the width, height,
margin-top, margin-bottom, and float properties have no effect.
Hence, element.offsetHeight and element.offsetWidt are zero(0).
</p>
Element with display inline should be invisible
</div>
<div>
</div>
</div>
</div>
`;
filePath = createHtml(innerHtml, test_name);
await openBrowser(openBrowserArgs);
await goto(filePath);
await setConfig({waitForNavigation:false});
});

after(async () => {
await setConfig({waitForNavigation:true});
await closeBrowser();
Expand Down Expand Up @@ -201,5 +233,23 @@ describe('match', () => {
expect(await text('tex').get()).to.have.lengthOf(11);
});
});

describe('Text visibility', () => {
it('txt should be visible', async () => {
expect(await text('Visible content').exists()).to.be.true;
});

it('txt should not be visible when display is set to none', async () => {
expect(await text('Element it self has display none').exists()).to.be.false;
});

it('txt should not be visible when paraent element display is set to none', async () => {
expect(await text('Parent element has display none').exists()).to.be.false;
});

it('txt should be visible when ', async () => {
expect(await text('Element with display inline should be invisible').exists()).to.be.true;
});
});
});
});

0 comments on commit 765f95a

Please sign in to comment.