-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
protractor-element.ts
309 lines (274 loc) · 10.9 KB
/
protractor-element.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {
_getTextWithExcludedElements,
ElementDimensions,
ModifierKeys,
TestElement,
TestKey,
TextOptions,
EventData,
} from '@angular/cdk/testing';
import {browser, Button, by, ElementFinder, Key} from 'protractor';
/** Maps the `TestKey` constants to Protractor's `Key` constants. */
const keyMap = {
[TestKey.BACKSPACE]: Key.BACK_SPACE,
[TestKey.TAB]: Key.TAB,
[TestKey.ENTER]: Key.ENTER,
[TestKey.SHIFT]: Key.SHIFT,
[TestKey.CONTROL]: Key.CONTROL,
[TestKey.ALT]: Key.ALT,
[TestKey.ESCAPE]: Key.ESCAPE,
[TestKey.PAGE_UP]: Key.PAGE_UP,
[TestKey.PAGE_DOWN]: Key.PAGE_DOWN,
[TestKey.END]: Key.END,
[TestKey.HOME]: Key.HOME,
[TestKey.LEFT_ARROW]: Key.ARROW_LEFT,
[TestKey.UP_ARROW]: Key.ARROW_UP,
[TestKey.RIGHT_ARROW]: Key.ARROW_RIGHT,
[TestKey.DOWN_ARROW]: Key.ARROW_DOWN,
[TestKey.INSERT]: Key.INSERT,
[TestKey.DELETE]: Key.DELETE,
[TestKey.F1]: Key.F1,
[TestKey.F2]: Key.F2,
[TestKey.F3]: Key.F3,
[TestKey.F4]: Key.F4,
[TestKey.F5]: Key.F5,
[TestKey.F6]: Key.F6,
[TestKey.F7]: Key.F7,
[TestKey.F8]: Key.F8,
[TestKey.F9]: Key.F9,
[TestKey.F10]: Key.F10,
[TestKey.F11]: Key.F11,
[TestKey.F12]: Key.F12,
[TestKey.META]: Key.META
};
/** Converts a `ModifierKeys` object to a list of Protractor `Key`s. */
function toProtractorModifierKeys(modifiers: ModifierKeys): string[] {
const result: string[] = [];
if (modifiers.control) {
result.push(Key.CONTROL);
}
if (modifiers.alt) {
result.push(Key.ALT);
}
if (modifiers.shift) {
result.push(Key.SHIFT);
}
if (modifiers.meta) {
result.push(Key.META);
}
return result;
}
/**
* A `TestElement` implementation for Protractor.
* @deprecated
* @breaking-change 13.0.0
*/
export class ProtractorElement implements TestElement {
constructor(readonly element: ElementFinder) {}
/** Blur the element. */
async blur(): Promise<void> {
return browser.executeScript('arguments[0].blur()', this.element);
}
/** Clear the element's input (for input and textarea elements only). */
async clear(): Promise<void> {
return this.element.clear();
}
/**
* Click the element at the default location for the current environment. If you need to guarantee
* the element is clicked at a specific location, consider using `click('center')` or
* `click(x, y)` instead.
*/
click(modifiers?: ModifierKeys): Promise<void>;
/** Click the element at the element's center. */
click(location: 'center', modifiers?: ModifierKeys): Promise<void>;
/**
* Click the element at the specified coordinates relative to the top-left of the element.
* @param relativeX Coordinate within the element, along the X-axis at which to click.
* @param relativeY Coordinate within the element, along the Y-axis at which to click.
* @param modifiers Modifier keys held while clicking
*/
click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
async click(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
[number, number, ModifierKeys?]): Promise<void> {
await this._dispatchClickEventSequence(args, Button.LEFT);
}
/**
* Right clicks on the element at the specified coordinates relative to the top-left of it.
* @param relativeX Coordinate within the element, along the X-axis at which to click.
* @param relativeY Coordinate within the element, along the Y-axis at which to click.
* @param modifiers Modifier keys held while clicking
*/
rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
async rightClick(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
[number, number, ModifierKeys?]): Promise<void> {
await this._dispatchClickEventSequence(args, Button.RIGHT);
}
/** Focus the element. */
async focus(): Promise<void> {
return browser.executeScript('arguments[0].focus()', this.element);
}
/** Get the computed value of the given CSS property for the element. */
async getCssValue(property: string): Promise<string> {
return this.element.getCssValue(property);
}
/** Hovers the mouse over the element. */
async hover(): Promise<void> {
return browser.actions()
.mouseMove(await this.element.getWebElement())
.perform();
}
/** Moves the mouse away from the element. */
async mouseAway(): Promise<void> {
return browser.actions()
.mouseMove(await this.element.getWebElement(), {x: -1, y: -1})
.perform();
}
/**
* Sends the given string to the input as a series of key presses. Also fires input events
* and attempts to add the string to the Element's value.
*/
async sendKeys(...keys: (string | TestKey)[]): Promise<void>;
/**
* Sends the given string to the input as a series of key presses. Also fires input events
* and attempts to add the string to the Element's value.
*/
async sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
async sendKeys(...modifiersAndKeys: any[]): Promise<void> {
const first = modifiersAndKeys[0];
let modifiers: ModifierKeys;
let rest: (string | TestKey)[];
if (typeof first !== 'string' && typeof first !== 'number') {
modifiers = first;
rest = modifiersAndKeys.slice(1);
} else {
modifiers = {};
rest = modifiersAndKeys;
}
const modifierKeys = toProtractorModifierKeys(modifiers);
const keys = rest.map(k => typeof k === 'string' ? k.split('') : [keyMap[k]])
.reduce((arr, k) => arr.concat(k), [])
// Key.chord doesn't work well with geckodriver (mozilla/geckodriver#1502),
// so avoid it if no modifier keys are required.
.map(k => modifierKeys.length > 0 ? Key.chord(...modifierKeys, k) : k);
return this.element.sendKeys(...keys);
}
/**
* Gets the text from the element.
* @param options Options that affect what text is included.
*/
async text(options?: TextOptions): Promise<string> {
if (options?.exclude) {
return browser.executeScript(_getTextWithExcludedElements, this.element, options.exclude);
}
return this.element.getText();
}
/** Gets the value for the given attribute from the element. */
async getAttribute(name: string): Promise<string|null> {
return browser.executeScript(
`return arguments[0].getAttribute(arguments[1])`, this.element, name);
}
/** Checks whether the element has the given class. */
async hasClass(name: string): Promise<boolean> {
const classes = (await this.getAttribute('class')) || '';
return new Set(classes.split(/\s+/).filter(c => c)).has(name);
}
/** Gets the dimensions of the element. */
async getDimensions(): Promise<ElementDimensions> {
const {width, height} = await this.element.getSize();
const {x: left, y: top} = await this.element.getLocation();
return {width, height, left, top};
}
/** Gets the value of a property of an element. */
async getProperty<T = any>(name: string): Promise<T> {
return browser.executeScript(`return arguments[0][arguments[1]]`, this.element, name);
}
/** Sets the value of a property of an input. */
async setInputValue(value: string): Promise<void> {
return browser.executeScript(`arguments[0].value = arguments[1]`, this.element, value);
}
/** Selects the options at the specified indexes inside of a native `select` element. */
async selectOptions(...optionIndexes: number[]): Promise<void> {
const options = await this.element.all(by.css('option'));
const indexes = new Set(optionIndexes); // Convert to a set to remove duplicates.
if (options.length && indexes.size) {
// Reset the value so all the selected states are cleared. We can
// reuse the input-specific method since the logic is the same.
await this.setInputValue('');
for (let i = 0; i < options.length; i++) {
if (indexes.has(i)) {
// We have to hold the control key while clicking on options so that multiple can be
// selected in multi-selection mode. The key doesn't do anything for single selection.
await browser.actions().keyDown(Key.CONTROL).perform();
await options[i].click();
await browser.actions().keyUp(Key.CONTROL).perform();
}
}
}
}
/** Checks whether this element matches the given selector. */
async matchesSelector(selector: string): Promise<boolean> {
return browser.executeScript(`
return (Element.prototype.matches ||
Element.prototype.msMatchesSelector).call(arguments[0], arguments[1])
`, this.element, selector);
}
/** Checks whether the element is focused. */
async isFocused(): Promise<boolean> {
return this.element.equals(browser.driver.switchTo().activeElement());
}
/**
* Dispatches an event with a particular name.
* @param name Name of the event to be dispatched.
*/
async dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void> {
return browser.executeScript(_dispatchEvent, name, this.element, data);
}
/** Dispatches all the events that are part of a click event sequence. */
private async _dispatchClickEventSequence(
args: [ModifierKeys?] | ['center', ModifierKeys?] |
[number, number, ModifierKeys?],
button: string) {
let modifiers: ModifierKeys = {};
if (args.length && typeof args[args.length - 1] === 'object') {
modifiers = args.pop() as ModifierKeys;
}
const modifierKeys = toProtractorModifierKeys(modifiers);
// Omitting the offset argument to mouseMove results in clicking the center.
// This is the default behavior we want, so we use an empty array of offsetArgs if
// no args remain after popping the modifiers from the args passed to this function.
const offsetArgs = (args.length === 2 ?
[{x: args[0], y: args[1]}] : []) as [{x: number, y: number}];
let actions = browser.actions()
.mouseMove(await this.element.getWebElement(), ...offsetArgs);
for (const modifierKey of modifierKeys) {
actions = actions.keyDown(modifierKey);
}
actions = actions.click(button);
for (const modifierKey of modifierKeys) {
actions = actions.keyUp(modifierKey);
}
await actions.perform();
}
}
/**
* Dispatches an event with a particular name and data to an element.
* Note that this needs to be a pure function, because it gets stringified by
* Protractor and is executed inside the browser.
*/
function _dispatchEvent(name: string, element: ElementFinder, data?: Record<string, EventData>) {
const event = document.createEvent('Event');
event.initEvent(name);
if (data) {
// tslint:disable-next-line:ban Have to use `Object.assign` to preserve the original object.
Object.assign(event, data);
}
// This type has a string index signature, so we cannot access it using a dotted property access.
element['dispatchEvent'](event);
}