How to interact an Element which is on iFrame on top of that its under Shadow-DOM :)

 < 03/23: Under Writing >

We can see from the below DOM , the elements for Destiny & Closed is on iFrame and which is under Shadow-DOM

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class TestingiFrameUnderShadowDOM {

public static void main(String[] args) throws InterruptedException {

WebDriver driver = new ChromeDriver();
driver.get("https://selectorshub.com/iframe-in-shadow-dom/");
driver.manage().window().maximize();
Thread.sleep(5000);
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement iFrameEle = (WebElement) js.executeScript("return document.querySelector('#userName').shadowRoot.querySelector('iframe#pact1')");
driver.switchTo().frame(iFrameEle);
driver.findElement(By.cssSelector("#glaf")).sendKeys("Testing");
driver.findElement(By.xpath("//button[@id='close']")).click();

}
}