@dev-blinq/cucumber_client 1.0.1451-dev → 1.0.1453-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/assets/bundled_scripts/recorder.js +1 -1
- package/bin/assets/preload/css_gen.js +10 -10
- package/bin/assets/preload/toolbar.js +27 -29
- package/bin/assets/preload/unique_locators.js +1 -1
- package/bin/assets/preload/yaml.js +288 -275
- package/bin/assets/scripts/aria_snapshot.js +223 -220
- package/bin/assets/scripts/dom_attr.js +329 -329
- package/bin/assets/scripts/dom_parent.js +169 -174
- package/bin/assets/scripts/event_utils.js +94 -94
- package/bin/assets/scripts/pw.js +2050 -1949
- package/bin/assets/scripts/recorder.js +3 -3
- package/bin/assets/scripts/snapshot_capturer.js +153 -146
- package/bin/assets/scripts/unique_locators.js +1 -2
- package/bin/assets/scripts/yaml.js +796 -783
- package/bin/client/code_cleanup/find_step_definition_references.js +0 -1
- package/bin/client/code_gen/api_codegen.js +2 -2
- package/bin/client/code_gen/code_inversion.js +4 -2
- package/bin/client/cucumber/feature_data.js +2 -2
- package/bin/client/cucumber/project_to_document.js +8 -2
- package/bin/client/cucumber/steps_definitions.js +6 -3
- package/bin/client/parse_feature_file.js +23 -26
- package/bin/client/playground/projects/env.json +2 -2
- package/bin/client/recorderv3/bvt_recorder.js +1 -0
- package/bin/client/recorderv3/scriptTest.js +1 -1
- package/bin/client/recorderv3/step_runner.js +2 -3
- package/bin/client/upload-service.js +2 -2
- package/package.json +2 -2
|
@@ -144,7 +144,7 @@ class BVTRecorder {
|
|
|
144
144
|
getAction: (e) => {
|
|
145
145
|
this.eventUtils.consumeEvent(e);
|
|
146
146
|
},
|
|
147
|
-
getInterestedElement: () => {
|
|
147
|
+
getInterestedElement: () => {},
|
|
148
148
|
hoverOutlineStyle: "",
|
|
149
149
|
});
|
|
150
150
|
|
|
@@ -159,7 +159,7 @@ class BVTRecorder {
|
|
|
159
159
|
};
|
|
160
160
|
},
|
|
161
161
|
getAction: () => null,
|
|
162
|
-
getInterestedElement: () => {
|
|
162
|
+
getInterestedElement: () => {},
|
|
163
163
|
hoverOutlineStyle: "",
|
|
164
164
|
});
|
|
165
165
|
|
|
@@ -174,7 +174,7 @@ class BVTRecorder {
|
|
|
174
174
|
};
|
|
175
175
|
},
|
|
176
176
|
getAction: () => null,
|
|
177
|
-
getInterestedElement: () => {
|
|
177
|
+
getInterestedElement: () => {},
|
|
178
178
|
hoverOutlineStyle: "",
|
|
179
179
|
});
|
|
180
180
|
|
|
@@ -1,155 +1,162 @@
|
|
|
1
1
|
class SnapshotCapturer {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
constructor(options = {}) {
|
|
3
|
+
const { inlineImages = true, inlineStyles = true, excludeSelectors = [] } = options;
|
|
4
|
+
// this.options = {
|
|
5
|
+
// inlineImages,
|
|
6
|
+
// inlineStyles,
|
|
7
|
+
// excludeSelectors
|
|
8
|
+
// };
|
|
9
|
+
this.inlineImages = inlineImages;
|
|
10
|
+
this.inlineStyles = inlineStyles;
|
|
11
|
+
this.excludeSelectors = excludeSelectors;
|
|
12
|
+
}
|
|
13
|
+
imageToDataURL(img, document) {
|
|
14
|
+
try {
|
|
15
|
+
// Create canvas to draw the image
|
|
16
|
+
const canvas = document.createElement("canvas");
|
|
17
|
+
canvas.width = img.naturalWidth || img.width;
|
|
18
|
+
canvas.height = img.naturalHeight || img.height;
|
|
19
|
+
const ctx = canvas.getContext("2d");
|
|
20
|
+
|
|
21
|
+
// Draw image to canvas and convert to data URL
|
|
22
|
+
ctx.drawImage(img, 0, 0);
|
|
23
|
+
return canvas.toDataURL("image/png");
|
|
24
|
+
} catch (error) {
|
|
25
|
+
console.warn(`Failed to inline image: ${img.src}`, error);
|
|
26
|
+
return img.src; // Fall back to original source
|
|
16
27
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
}
|
|
29
|
+
processStyles(document) {
|
|
30
|
+
if (!this.inlineStyles) return;
|
|
31
|
+
|
|
32
|
+
const stylesheets = Array.from(document.styleSheets);
|
|
33
|
+
for (const sheet of stylesheets) {
|
|
34
|
+
try {
|
|
35
|
+
if (!sheet.href) continue; // Skip inline styles
|
|
36
|
+
const styleEl = document.createElement("style");
|
|
37
|
+
let text = "";
|
|
38
|
+
const cssRules = Array.from(sheet.cssRules || []);
|
|
39
|
+
for (const rule of cssRules) {
|
|
40
|
+
if (rule.cssText) {
|
|
41
|
+
text += rule.cssText + "\n";
|
|
42
|
+
}
|
|
31
43
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const styleEl = document.createElement('style');
|
|
41
|
-
let text = ""
|
|
42
|
-
const cssRules = Array.from(sheet.cssRules || []);
|
|
43
|
-
for (const rule of cssRules) {
|
|
44
|
-
if (rule.cssText) {
|
|
45
|
-
text += rule.cssText + '\n';
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
styleEl.textContent = text;
|
|
49
|
-
|
|
50
|
-
// Replace the link with our new style element
|
|
51
|
-
if (sheet.ownerNode && sheet.ownerNode.parentNode) {
|
|
52
|
-
sheet.ownerNode.parentNode.replaceChild(styleEl, sheet.ownerNode);
|
|
53
|
-
} else if (sheet.ownerNode) {
|
|
54
|
-
// If the owner node is not in the document, just append it
|
|
55
|
-
document.head.appendChild(styleEl);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
} catch (error) {
|
|
59
|
-
console.warn(`Error processing stylesheet: ${sheet.href}`, error);
|
|
60
|
-
}
|
|
44
|
+
styleEl.textContent = text;
|
|
45
|
+
|
|
46
|
+
// Replace the link with our new style element
|
|
47
|
+
if (sheet.ownerNode && sheet.ownerNode.parentNode) {
|
|
48
|
+
sheet.ownerNode.parentNode.replaceChild(styleEl, sheet.ownerNode);
|
|
49
|
+
} else if (sheet.ownerNode) {
|
|
50
|
+
// If the owner node is not in the document, just append it
|
|
51
|
+
document.head.appendChild(styleEl);
|
|
61
52
|
}
|
|
53
|
+
} catch (error) {
|
|
54
|
+
console.warn(`Error processing stylesheet: ${sheet.href}`, error);
|
|
55
|
+
}
|
|
62
56
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const images = document.querySelectorAll('img');
|
|
67
|
-
images.forEach(img => {
|
|
68
|
-
// Skip SVGs and already data URLs
|
|
69
|
-
if (img.src.startsWith('data:') || img.src.endsWith('.svg')) return;
|
|
70
|
-
|
|
71
|
-
// Skip if the image is excluded
|
|
72
|
-
if (this.excludeSelectors.some(selector => img.matches(selector))) return;
|
|
73
|
-
|
|
74
|
-
// Only inline complete images
|
|
75
|
-
if (img.complete && img.naturalWidth !== 0) {
|
|
76
|
-
try {
|
|
77
|
-
img.setAttribute('src', this.imageToDataURL(img, document));
|
|
78
|
-
} catch (e) {
|
|
79
|
-
console.warn(`Failed to process image: ${img.src}`, e);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
removeExcludedElements(document) {
|
|
85
|
-
this.excludeSelectors.forEach(selector => {
|
|
86
|
-
const elements = document.querySelectorAll(selector);
|
|
87
|
-
elements.forEach(el => {
|
|
88
|
-
el.parentNode?.removeChild(el);
|
|
89
|
-
});
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
processComputedStyles(document) {
|
|
93
|
-
const elements = document.querySelectorAll('*');
|
|
94
|
-
|
|
95
|
-
elements.forEach(el => {
|
|
96
|
-
// Skip excluded elements
|
|
97
|
-
if (this.excludeSelectors.some(selector => el.matches(selector))) return;
|
|
98
|
-
|
|
99
|
-
// Get computed style
|
|
100
|
-
const style = window.getComputedStyle(el);
|
|
101
|
-
|
|
102
|
-
// Copy important styles to inline style
|
|
103
|
-
const importantStyles = [
|
|
104
|
-
'display', 'position', 'width', 'height', 'margin', 'padding',
|
|
105
|
-
'color', 'background-color', 'font-family', 'font-size',
|
|
106
|
-
'text-align', 'line-height', 'border', 'box-shadow', 'opacity'
|
|
107
|
-
// Add more styles as needed
|
|
108
|
-
];
|
|
109
|
-
|
|
110
|
-
const inlineStyles = [];
|
|
111
|
-
|
|
112
|
-
importantStyles.forEach(prop => {
|
|
113
|
-
const value = style.getPropertyValue(prop);
|
|
114
|
-
if (value) {
|
|
115
|
-
inlineStyles.push(`${prop}: ${value}`);
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
// Set inline style
|
|
120
|
-
if (inlineStyles.length > 0) {
|
|
121
|
-
const currentStyle = el.getAttribute('style') || '';
|
|
122
|
-
el.setAttribute('style', currentStyle + inlineStyles.join('; ') + ';');
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
createSnapshot() {
|
|
128
|
-
// Clone the document to avoid modifying the original
|
|
129
|
-
const docClone = window.document.cloneNode(true);
|
|
130
|
-
|
|
131
|
-
// Store the original document
|
|
132
|
-
const originalDoc = window.document;
|
|
57
|
+
}
|
|
58
|
+
processImages(document) {
|
|
59
|
+
if (!this.inlineImages) return;
|
|
133
60
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
61
|
+
const images = document.querySelectorAll("img");
|
|
62
|
+
images.forEach((img) => {
|
|
63
|
+
// Skip SVGs and already data URLs
|
|
64
|
+
if (img.src.startsWith("data:") || img.src.endsWith(".svg")) return;
|
|
137
65
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
this.processImages(doc);
|
|
141
|
-
this.removeExcludedElements(doc);
|
|
142
|
-
this.processComputedStyles(doc);
|
|
66
|
+
// Skip if the image is excluded
|
|
67
|
+
if (this.excludeSelectors.some((selector) => img.matches(selector))) return;
|
|
143
68
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
69
|
+
// Only inline complete images
|
|
70
|
+
if (img.complete && img.naturalWidth !== 0) {
|
|
71
|
+
try {
|
|
72
|
+
img.setAttribute("src", this.imageToDataURL(img, document));
|
|
73
|
+
} catch (e) {
|
|
74
|
+
console.warn(`Failed to process image: ${img.src}`, e);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
removeExcludedElements(document) {
|
|
80
|
+
this.excludeSelectors.forEach((selector) => {
|
|
81
|
+
const elements = document.querySelectorAll(selector);
|
|
82
|
+
elements.forEach((el) => {
|
|
83
|
+
el.parentNode?.removeChild(el);
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
processComputedStyles(document) {
|
|
88
|
+
const elements = document.querySelectorAll("*");
|
|
89
|
+
|
|
90
|
+
elements.forEach((el) => {
|
|
91
|
+
// Skip excluded elements
|
|
92
|
+
if (this.excludeSelectors.some((selector) => el.matches(selector))) return;
|
|
93
|
+
|
|
94
|
+
// Get computed style
|
|
95
|
+
const style = window.getComputedStyle(el);
|
|
96
|
+
|
|
97
|
+
// Copy important styles to inline style
|
|
98
|
+
const importantStyles = [
|
|
99
|
+
"display",
|
|
100
|
+
"position",
|
|
101
|
+
"width",
|
|
102
|
+
"height",
|
|
103
|
+
"margin",
|
|
104
|
+
"padding",
|
|
105
|
+
"color",
|
|
106
|
+
"background-color",
|
|
107
|
+
"font-family",
|
|
108
|
+
"font-size",
|
|
109
|
+
"text-align",
|
|
110
|
+
"line-height",
|
|
111
|
+
"border",
|
|
112
|
+
"box-shadow",
|
|
113
|
+
"opacity",
|
|
114
|
+
// Add more styles as needed
|
|
115
|
+
];
|
|
116
|
+
|
|
117
|
+
const inlineStyles = [];
|
|
118
|
+
|
|
119
|
+
importantStyles.forEach((prop) => {
|
|
120
|
+
const value = style.getPropertyValue(prop);
|
|
121
|
+
if (value) {
|
|
122
|
+
inlineStyles.push(`${prop}: ${value}`);
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
// Set inline style
|
|
127
|
+
if (inlineStyles.length > 0) {
|
|
128
|
+
const currentStyle = el.getAttribute("style") || "";
|
|
129
|
+
el.setAttribute("style", currentStyle + inlineStyles.join("; ") + ";");
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
createSnapshot() {
|
|
134
|
+
// Clone the document to avoid modifying the original
|
|
135
|
+
const docClone = window.document.cloneNode(true);
|
|
136
|
+
|
|
137
|
+
// Store the original document
|
|
138
|
+
const originalDoc = window.document;
|
|
139
|
+
|
|
140
|
+
// Temporarily "swap" the document for processing
|
|
141
|
+
// (We're just using this as a convention - it doesn't actually replace the global document)
|
|
142
|
+
const doc = docClone;
|
|
143
|
+
|
|
144
|
+
// Process the clone
|
|
145
|
+
this.processStyles(doc);
|
|
146
|
+
this.processImages(doc);
|
|
147
|
+
this.removeExcludedElements(doc);
|
|
148
|
+
this.processComputedStyles(doc);
|
|
149
|
+
|
|
150
|
+
// Generate HTML with doctype
|
|
151
|
+
const doctype = originalDoc.doctype
|
|
152
|
+
? new XMLSerializer().serializeToString(originalDoc.doctype)
|
|
153
|
+
: "<!DOCTYPE html>";
|
|
154
|
+
|
|
155
|
+
// Get the HTML content
|
|
156
|
+
const htmlContent = doc.documentElement.outerHTML;
|
|
157
|
+
|
|
158
|
+
// Combine doctype and HTML content
|
|
159
|
+
return `${doctype}${htmlContent}`;
|
|
160
|
+
}
|
|
154
161
|
}
|
|
155
|
-
export default SnapshotCapturer;
|
|
162
|
+
export default SnapshotCapturer;
|
|
@@ -158,8 +158,7 @@ class LocatorGenerator {
|
|
|
158
158
|
const tSelectorList = [];
|
|
159
159
|
for (const selectorPart of selectorPartList) {
|
|
160
160
|
const { engine, selector } = selectorPart;
|
|
161
|
-
if (textToIgnore && selector.includes(textToIgnore)
|
|
162
|
-
) {
|
|
161
|
+
if (textToIgnore && selector.includes(textToIgnore)) {
|
|
163
162
|
continue;
|
|
164
163
|
}
|
|
165
164
|
if (engine === "css") {
|