-
Notifications
You must be signed in to change notification settings - Fork 674
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Closes #7375. ### Use cases 1. **Picking + generation**. Click on the `Pick` button and select the element with a mouse click. As a result, several selectors matching this element will be generated. The first of the generated selectors will be placed in the selector input, the rest are available in the list of selectors, which can be expanded by clicking on the arrow to the left of the `Copy` button. 2. **Debug selector**. Start typing the selector in CSS or TestCafe format. As you type, all matching elements will be highlighted with a frame. In addition, to the right of the input field there is an indicator that shows the number of matching elements. ### Peculiarities **In the picking mode** all elements of TestCafe UI, except for the frame that highlights the element, disappear. **Input selector format**. The Selector Inspector recognizes selectors in two formats: CSS and TestCafe. CSS: `div > div input`, `p:nth-child(2)`, `span[custom-attribute="value"].className` TestCafe: `Selector('.my-class')`, `Selector('div').withText('Hello World!')` **Match indicator**. It has three states: `not found`, `incorrect selector` and `found: {number of elements}`. **List of generated selectors**. Cleared as soon as the user starts typing in the selector input field. **Highlighting elements** matching the input selector is active only when the selector input has focus. ### Restrictions 1. The inspector is currently only available in debug mode (`await t.debug()`). 2. Picking does not work in iframes. 3. Picking doesn't work with Shadow DOM. 4. The selector generator is not configurable. 5. There is only one generator so far, and the user will not be able to redefine the generation function. ## Initial state  ## Picking  ## Selector typing  ## Selecting a selector from a list  ## Copy selector 
- Loading branch information
Showing
33 changed files
with
1,763 additions
and
187 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import hammerhead from './../deps/hammerhead'; | ||
| import testCafeCore from './../deps/testcafe-core'; | ||
|
|
||
| import { createElementFromDescriptor } from './utils/create-element-from-descriptor'; | ||
| import { setStyles } from './utils/set-styles'; | ||
| import { copy } from './utils/copy'; | ||
|
|
||
| import * as descriptors from './descriptors'; | ||
|
|
||
| const nativeMethods = hammerhead.nativeMethods; | ||
|
|
||
| const eventUtils = testCafeCore.eventUtils; | ||
|
|
||
| const ANIMATION_TIMEOUT = 1200; | ||
|
|
||
| const VALUES = { | ||
| copy: 'Copy', | ||
| copied: 'Copied!', | ||
| }; | ||
|
|
||
| export class CopyButton { | ||
| element; | ||
| sourceElement; | ||
|
|
||
| constructor (sourceElement) { | ||
| this.element = createElementFromDescriptor(descriptors.copyButton); | ||
| this.sourceElement = sourceElement; | ||
|
|
||
| eventUtils.bind(this.element, 'click', () => this._copySelector()); | ||
| } | ||
|
|
||
| _copySelector () { | ||
| // eslint-disable-next-line no-restricted-properties | ||
| copy(this.sourceElement.value); | ||
|
|
||
| this._animate(); | ||
| } | ||
|
|
||
| _animate () { | ||
| this._changeAppearance(VALUES.copied, 'bold'); | ||
|
|
||
| nativeMethods.setTimeout.call(window, () => this._resetAppearance(), ANIMATION_TIMEOUT); | ||
| } | ||
|
|
||
| _resetAppearance () { | ||
| this._changeAppearance(VALUES.copy, ''); | ||
| } | ||
|
|
||
| _changeAppearance (value, fontWeight) { | ||
| nativeMethods.inputValueSetter.call(this.element, value); | ||
|
|
||
| setStyles(this.element, { fontWeight }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| export const pickButton = { | ||
| tag: 'input', | ||
| type: 'button', | ||
| value: 'Pick', | ||
| class: 'pick-button', | ||
| }; | ||
|
|
||
| export const selectorInput = { | ||
| tag: 'input', | ||
| type: 'text', | ||
| class: 'selector-input', | ||
| }; | ||
|
|
||
| export const matchIndicator = { | ||
| class: 'match-indicator', | ||
| text: 'No Matching Elements', | ||
| }; | ||
|
|
||
| export const expandSelectorsList = { | ||
| class: 'expand-selector-list', | ||
| }; | ||
|
|
||
| export const selectorInputContainer = { | ||
| class: 'selector-input-container', | ||
| }; | ||
|
|
||
| export const copyButton = { | ||
| tag: 'input', | ||
| type: 'button', | ||
| value: 'Copy', | ||
| }; | ||
|
|
||
| export const selectorsList = { | ||
| class: 'selectors-list', | ||
| }; | ||
|
|
||
| export const panel = { | ||
| class: 'selector-inspector-panel', | ||
| }; | ||
|
|
||
| export const elementFrame = { | ||
| class: 'element-frame', | ||
| }; | ||
|
|
||
| export const tooltip = { | ||
| class: 'tooltip', | ||
| }; | ||
|
|
||
| export const arrow = { | ||
| class: 'arrow', | ||
| }; | ||
|
|
||
| export const auxiliaryCopyInput = { | ||
| tag: 'input', | ||
| type: 'text', | ||
| class: 'auxiliary-input', | ||
| }; |
Oops, something went wrong.