Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<maven.javadoc.plugin.version>3.6.3</maven.javadoc.plugin.version>
<maven.source.plugin.version>3.3.0</maven.source.plugin.version>
<selenium.version>4.16.1</selenium.version>
<webdrivermanager.version>5.6.2</webdrivermanager.version>
<webdrivermanager.version>6.2.0</webdrivermanager.version>
<selenium-chrome-driver.version>${selenium.version}</selenium-chrome-driver.version>
<selenium-firefox-driver.version>${selenium.version}</selenium-firefox-driver.version>
</properties>
Expand Down
12 changes: 12 additions & 0 deletions src/test/java/io/github/sukgu/LocalFileTest.java
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,18 @@ public void testAllElementsXPathWithId() {
assert element.size()==2;
}

@Test
public void testShadowNested() {
driver.navigate().to(getPageContent("nested.html"));
WebElement element = shadow.findElement("div[id='host1'] > div[id='middle1'] > div[id='inner1'] > input[id='input1']");
WebElement button = shadow.findElement("div[id='host1'] > div[id='middle1'] > div[id='inner1'] > button[id='button1']");
shadow.scrollTo(element);
assertThat(element, notNullValue());
element.click();
element.sendKeys("ilk test html");
System.out.println(shadow.getAttribute(button,"id"));
}

@AfterAll
public static void tearDownAll() {
driver.quit();
Expand Down
105 changes: 105 additions & 0 deletions src/test/resources/nested.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>4-Layer Shadow DOM with Button</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.host {
margin-bottom: 30px;
}
</style>
</head>
<body>

<div class="host" id="host1"></div>
<div class="host" id="host2"></div>
<div class="host" id="host3"></div>

<script>
function createFourLayerShadowTextbox(hostId, labelText,middleHostId,innerHostId,inputId,labelId,buttonId) {
const host = document.getElementById(hostId);

// OUTER SHADOW
const outerShadow = host.attachShadow({ mode: 'open' });

const middleHost = document.createElement('div');
middleHost.className = 'middle-host';
middleHost.setAttribute("id", middleHostId);


// MIDDLE SHADOW
const middleShadow = middleHost.attachShadow({ mode: 'open' });

const innerHost = document.createElement('div');
innerHost.className = 'inner-host';
innerHost.setAttribute("id", innerHostId);

// INNER SHADOW (input + label + button container)
const innerShadow = innerHost.attachShadow({ mode: 'open' });

const wrapper = document.createElement('div');

const inputBefore = document.createElement('span');
inputBefore.textContent = "🧱 Input begins here ";

const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Type something...';
input.setAttribute("maxlength", "30");
input.setAttribute("id", inputId);


// Label
const label = document.createElement('label');
label.textContent = labelText;
label.setAttribute("id",labelId)

// Live update
input.addEventListener('input', () => {
label.textContent = input.value;
});

// BUTTON HOST
const buttonHost = document.createElement('div');
buttonHost.className = "button-host";

// shadow root for button
const buttonShadow = buttonHost.attachShadow({ mode: 'open' });

const button = document.createElement('button');
button.textContent = "Show Alert";
button.setAttribute("id",buttonId)

// Button: shows input value
button.addEventListener('click', () => {
alert(`Input value: ${input.value}`);
});

buttonShadow.appendChild(button);

// Build
wrapper.appendChild(inputBefore);
wrapper.appendChild(input);
wrapper.appendChild(document.createElement('br'));
wrapper.appendChild(label);
wrapper.appendChild(document.createElement('br'));
wrapper.appendChild(buttonHost);

innerShadow.appendChild(wrapper);
middleShadow.appendChild(innerHost);
outerShadow.appendChild(middleHost);
}



createFourLayerShadowTextbox("host1", "Label 1","middle1","inner1","input1","label1","button1");
createFourLayerShadowTextbox("host2", "Label 2","middle2","inner2","input2","label2","button2");
createFourLayerShadowTextbox("host3", "Label 3","middle3","inner3","input3","label3","button3");

</script>
</body>
</html>