Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: selector inspector panel (closes #7375) #7372

Merged
merged 27 commits into from
Feb 10, 2023
Merged

feat: selector inspector panel (closes #7375) #7372

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
005408d
feat: Selector Inspector
felis2803 Jan 20, 2023
631b389
fix: style of .selector-value
felis2803 Jan 20, 2023
e41847b
fix: highlight disappears on click
felis2803 Jan 20, 2023
4211af0
feat: added a shadow for the element frame
felis2803 Jan 20, 2023
ea2806c
fix: inspector panel does not overlap status bar
felis2803 Jan 22, 2023
c1b31a6
fix: element frames do not overlap panels
felis2803 Jan 22, 2023
a6e49f7
fix: match indicator text changed
felis2803 Jan 23, 2023
d446891
fix: match indicator text changed
felis2803 Jan 23, 2023
46adf0f
style: removed extra styles
felis2803 Jan 24, 2023
590a453
fix: prevented repeated generation of selectors for the same element
felis2803 Jan 25, 2023
25b9321
refactor: elementPicker is available from selectorInspectorPanel for …
felis2803 Jan 25, 2023
9ef6e76
fix: auxiliary input is no longer shown
felis2803 Jan 26, 2023
31264da
test: added required tests
felis2803 Jan 26, 2023
19d5402
chore: got rid of auxiliary file and scripts
felis2803 Jan 26, 2023
8d27cee
chore: new link to selector generator
felis2803 Jan 26, 2023
7937a36
test: moved selector inspector utils to 'utils' dir
felis2803 Jan 27, 2023
447272d
fix: Selector Inspector no longer causes an error in the iframe driver
felis2803 Jan 27, 2023
d0cda46
style: fixed linting errors
felis2803 Jan 27, 2023
2c08769
test: skipped tests in ie
felis2803 Jan 27, 2023
f3b5a3d
test: skipped tests in experimental debug mode
felis2803 Jan 27, 2023
966a39b
chore(deps): used published testcafe-selector-generator
felis2803 Jan 30, 2023
4c5657d
refactor: separate function _getParsedSelector
felis2803 Jan 30, 2023
2192415
refactor: parseSelectorUrl -> parseSelectorRelativeUrl
felis2803 Jan 30, 2023
3037dc9
refactor: parseSelectorUrl -> parseSelector
felis2803 Jan 30, 2023
413986b
fix: got rid of this in static method
felis2803 Jan 30, 2023
a557c6d
test: reduced the test page
felis2803 Jan 31, 2023
ef348a5
test: skipped on mobile
felis2803 Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test: reduced the test page
  • Loading branch information
@felis2803
felis2803 committed Feb 10, 2023
commit a557c6d0815dc6742944741f6fd67d1d78c08771
94 changes: 10 additions & 84 deletions test/functional/fixtures/ui/pages/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,11 @@
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>TestCafe Example Page</title>
</head>
<body>

<form id="main-form" action="#">
<div class="main-content">
<header>
<h1>Example</h1>
<p>This webpage is used as a sample in TestCafe tutorials.</p>
<div id="shadow-host"></div>
</header>
<div class="row">
<div class="column col-1">
<fieldset>
<legend>Your name:</legend>
<input id="developer-name" name="name" type="text" data-testid="name-input">
<input type="button" id="populate" data-testid="populate-button" value="Populate">
</fieldset>
<fieldset>
<legend>Which features are important to you:</legend>
<p><label for="remote-testing"><input type="checkbox" name="remote" id="remote-testing" data-testid="remote-testing-checkbox">Support for testing on remote devices</label></p>
<p><label for="reusing-js-code"><input type="checkbox" name="re-using" id="reusing-js-code" data-testid="reusing-js-code-checkbox">Re-using existing JavaScript code for testing</label></p>
<p><label for="background-parallel-testing"><input type="checkbox" name="background" id="background-parallel-testing" data-testid="parallel-testing-checkbox">Running tests in background and/or in parallel in multiple browsers</label></p>
<p><label for="continuous-integration-embedding"><input type="checkbox" name="CI" id="continuous-integration-embedding" data-testid="ci-checkbox">Easy embedding into a Continuous integration system</label></p>
<p><label for="traffic-markup-analysis"><input type="checkbox" name="analysis" id="traffic-markup-analysis" data-testid="analysis-checkbox">Advanced traffic and markup analysis</label></p>
</fieldset>
<div id="main">
<p><input id="first-input" type="checkbox">Any text</p>
<p><input id="second-input" type="checkbox">Another text</p>
<p><input id="third-input" type="text"></p>
<p><input id="fourth-input" type="text"></p>
<p><input type="text"></p>
<div id="container">
<div>Any text</div>
<div>Another text</div>
</div>
</div>

<div class="column col-2">
<fieldset>
<legend>What is your primary Operating System:</legend>
<p><label for="windows"><input type="radio" name="os" id="windows" value="Windows" data-testid="windows-radio">Windows</label></p>
<p><label for="macos"><input type="radio" name="os" id="macos" value="MacOS" data-testid="macos-radio">MacOS</label></p>
<p><label for="linux"><input type="radio" name="os" id="linux" value="Linux" data-testid="linux-radio">Linux</label></p>
</fieldset>

<fieldset>
<legend>Which TestCafe interface do you use:</legend>
<select id="preferred-interface" name="preferred-interface" data-testid="preferred-interface-select">
<option selected="selected">Command Line</option>
<option>JavaScript API</option>
<option>Both</option>
</select>
</fieldset>
</div>
</div>
<div class="form-bottom">
<fieldset id="tried-section">
<label for="tried-test-cafe"><input type="checkbox" name="tried-test-cafe" id="tried-test-cafe" data-testid="tried-testcafe-checkbox">I have tried TestCafe</label>
</fieldset>

<fieldset>
<legend>How would you rate TestCafe on a scale from 1 to 10</legend>
<div class="slider-container">
<div id="slider" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content ui-slider-disabled ui-state-disabled"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span></div>
<div class="slider-values">
<div class="slider-value">1</div>
<div class="slider-value">2</div>
<div class="slider-value">3</div>
<div class="slider-value">4</div>
<div class="slider-value">5</div>
<div class="slider-value">6</div>
<div class="slider-value">7</div>
<div class="slider-value">8</div>
<div class="slider-value">9</div>
<div class="slider-value">10</div>
</div>
</div>
</fieldset>

<fieldset>
<legend>Please let us know what you think:</legend>
<textarea id="comments" name="comments" data-testid="comments-area" disabled="disabled"></textarea>
</fieldset>

<button type="submit" id="submit-button" data-testid="submit-button" disabled="disabled">Submit</button>
</div>
</div>
</form>

</body></html>
10 changes: 5 additions & 5 deletions test/functional/fixtures/ui/testcafe-fixtures/selector-inspector-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,14 @@ test('should generate valid selector', async t => {

startPicking()
.then(() => {
const target = document.querySelector('div.column:nth-child(2) > fieldset:nth-child(2) > legend:nth-child(1)');
const target = document.querySelector('#container > div:nth-child(2)');

pickElement(target);

return getSelectorInputValue();
})
.then(value => {
if (value === "Selector('#main-form legend').withText('Which TestCafe interface do you use:')")
if (value === "Selector('#container div').withText('Another text')")
resumeTest();
});
})();
Expand Down Expand Up @@ -102,7 +102,7 @@ test('should indicate the correct number of elements matching the selector', asy
return getMatchIndicatorInnerText();
})
.then(text => {
if (text === 'Found: 19')
if (text === 'Found: 4')
resumeTest();
});
})();
Expand Down Expand Up @@ -156,7 +156,7 @@ test('should highlight matches elements on input', async t => {
const selector = 'input[id]';
const elements = document.querySelectorAll(selector);

if (!elements || elements.length < 2)
if (!elements || elements.length !== 4)
return;

typeSelector(selector)
Expand Down Expand Up @@ -189,7 +189,7 @@ test('should place a selector selected from the list in the input field', async

startPicking()
.then(() => {
const target = document.querySelector('#main-form > div > div.row > div.column.col-1 > fieldset:nth-child(2) > p:nth-child(3)');
const target = document.querySelector('#main > p:nth-child(3)');

pickElement(target);

Expand Down