| <!doctype html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("DOM.highlightSelector"); |
| |
| let mainFrame = WI.frameResourceManager.mainFrame; |
| let childFrames = mainFrame.childFrameCollection.toArray(); |
| InspectorTest.expectEqual(childFrames.length, 1, "Page should have a subframe."); |
| |
| let mainFrameId = mainFrame.id; |
| let childFrameId = childFrames[0].id; |
| |
| const highlightConfig = { |
| showInfo: true, |
| contentColor: {r: 255, g: 255, b: 255}, |
| paddingColor: {r: 255, g: 255, b: 255}, |
| borderColor: {r: 255, g: 255, b: 255}, |
| marginColor: {r: 255, g: 255, b: 255}, |
| }; |
| |
| let tests = [ |
| { |
| name: "MainFrameTagSelector", |
| frameId: mainFrameId, |
| selector: "div", |
| expectedElements: 3, |
| }, |
| { |
| name: "MainFrameWithClassSelector", |
| frameId: mainFrameId, |
| selector: ".class-one", |
| expectedElements: 2, |
| }, |
| { |
| name: "MainFrameWithMultipleClassSelector", |
| frameId: mainFrameId, |
| selector: ".class-one.\\.escaped", |
| expectedElements: 1, |
| }, |
| { |
| name: "MainFrameIdSelector", |
| frameId: mainFrameId, |
| selector: "#id-one", |
| expectedElements: 1, |
| }, |
| { |
| name: "MainFrameMultipleSelectors", |
| frameId: mainFrameId, |
| selector: ".class-one, .class-two", |
| expectedElements: 3, |
| }, |
| { |
| name: "MissingOptionalFrameIdShouldUseMainFrame", |
| selector: "iframe.class-one", |
| expectedElements: 1, |
| }, |
| { |
| name: "MainFrameNonMatchingSelector", |
| frameId: mainFrameId, |
| selector: ".no-elements", |
| expectedElements: 0, |
| }, |
| { |
| name: "BadFrameShouldError", |
| frameId: "x.x", |
| selector: "div", |
| expectError: true, |
| }, |
| { |
| name: "BadSelectorShouldError", |
| frameId: mainFrameId, |
| selector: "$%foobar", |
| expectError: true, |
| }, |
| { |
| name: "ChildFrameTagSelector", |
| frameId: childFrameId, |
| selector: "div", |
| expectedElements: 2, |
| }, |
| { |
| name: "ChildFrameIdSelector", |
| frameId: childFrameId, |
| selector: "#id-one", |
| expectedElements: 1, |
| }, |
| ]; |
| |
| function displayNameForFrameId(frameId) { |
| if (frameId === undefined) |
| return "Not Provided"; |
| if (frameId === mainFrameId) |
| return "<main-frame>"; |
| if (frameId === childFrameId) |
| return "<child-frame>"; |
| return "Bad Value"; |
| } |
| |
| function getHighlight(callback) { |
| InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", (error, value, wasThrown) => { |
| InspectorTest.assert(!error, "Unexpected error dumping highlight: " + error); |
| InspectorTest.assert(!wasThrown, "Unexpected exception when dumping highlight."); |
| callback(JSON.parse(value)); |
| }); |
| } |
| |
| for (let {name, frameId, selector, expectedElements, expectError} of tests) { |
| suite.addTestCase({ |
| name, |
| test(resolve, reject) { |
| InspectorTest.log("- Frame: " + displayNameForFrameId(frameId)); |
| InspectorTest.log("- Selector: " + selector); |
| DOMAgent.highlightSelector(highlightConfig, selector, frameId, (error) => { |
| if (expectError) { |
| InspectorTest.expectThat(error, "Should throw error: " + error); |
| resolve(); |
| } else { |
| InspectorTest.assert(!error, "Should not throw error."); |
| getHighlight((highlightPayloadList) => { |
| InspectorTest.expectThat(highlightPayloadList.length === expectedElements, `Should highlight ${expectedElements} element(s).`); |
| if (highlightPayloadList.length) { |
| InspectorTest.log("Highlighted Elements:"); |
| for (let highlightPayload of highlightPayloadList) |
| InspectorTest.log(JSON.stringify(highlightPayload.elementData)); |
| } |
| resolve(); |
| }); |
| } |
| }); |
| } |
| }); |
| } |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the DOM.highlightSelector command.</p> |
| <div style="width: 500px; height: 500px"> |
| <div class="class-one .escaped" style="width: 10px; height: 20px"></div> |
| <div id="id-one" class="class-two" style="width:100px; height: 200px"></div> |
| <iframe class="class-one" src="resources/highlight-iframe.html"></iframe> |
| </div> |
| </body> |
| </html> |
