3

I want to do automatic testing using test data from here with Norwegian BankId. But I can't get hold of the input field using Selenium.

What I try to do:

  1. Go to https://www.banknorwegian.no/
  2. Click on "Logg inn"
  3. Click on "BankID på mobil."
  4. Click on "BankID" under "Alternativer for innlogging"
  5. Enter "02105892090" (test user from above link) and click on "Logg inn"
  6. Enter "02105892090" again in the "Engangskode" and click on the submit button.

HTML:

<iframe frameborder="0" width="100%" height="100%" src="<URL>" title="BankID">
    <div>Lots of divs...</div>
    <input data-bind=" attr: { maxlength: maxlength, type: type, id: id, 'data-type': dataType, disabled: disabled, 'aria-disabled': disabled, 'pattern': pattern, 'inputmode': 'numeric', 'max': $data.max, 'min': $data.min, 'step': $data.step, 'tabindex': $data.tabIndex, 'aria-invalid': isInvalid, 'aria-label': label }, value: val, valueUpdate: valueUpdate, css: { error: $data.err, hasFocus: hasFocus, hideCaret: $data.hideCaret, hasValue: hasValue }, event: { focus: onFocus, blur: onBlur }" autocomplete="off" autocapitalize="off" autocorrect="off" formnovalidate="" required="" maxlength="255" type="password" id="qxaTy_DZXMJPMnP_rZae_2" tabindex="2000" aria-invalid="true" pattern="[0-9]*" class="">`
</iframe>

I can get to (6.) but then I can't get hold of the <input> with type="password" under "Engangskode". It's in an iframe which makes it harder. This is what I've tried:

public void EnterSsn(string ssn)
{
    var driver = WebDriverFacade.GetDriver;
    driver.SwitchTo().DefaultContent();

    driver.SwitchTo().Frame(0);

    Assert.IsTrue(driver.FindElement(By.CssSelector("input[type='password']")).ControlDisplayed());

    driver.FindElement(By.CssSelector("input[type='password']")).SendKeysWrapper(ssn, "SSN");
}

But I get the error message: 

OpenQA.Selenium.NoSuchElementException : no such element: Unable to locate element: {"method":"css selector","selector":"input[type='password']"}

Does anyone have any idea how to do this?

EDIT:

With the help of all of you this is the code that finally worked:

public void EnterSsn(string ssn)
{
    var driver = WebDriverFacade.GetDriver;
    driver.SwitchTo().DefaultContent();

    new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.FrameToBeAvailableAndSwitchToIt(By.CssSelector("iframe#ifmSingicat")));
    new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.FrameToBeAvailableAndSwitchToIt(By.CssSelector("#bankid-container iframe")));
    new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable((IWebElement)((IJavaScriptExecutor)driver).ExecuteScript("return document.querySelector(\".full_width_height\").shadowRoot.querySelector(\"input[type=\'password\']\")"))).SendKeys(ssn);
}
Joel Wiklund
  • 1,697
  • 2
  • 18
  • 24

3 Answers3

1

Here you have 2 iframes (nested iframes), so that you need to switch twice. First switch to iframe with id=ifmSingicat then to the first iframe of the switched iframe.

//Main document
driver.SwitchTo().DefaultContent();

//Find the first frame, and use switch to frame
IWebElement containerFrame = driver.FindElement(By.Id("ifmSingicat"));
driver.SwitchTo().Frame(containerFrame);

//You are now in iframe "containerFrame", now find the nested iframe
IWebElement contentFrame = driver.FindElement(By.CssSelector("#bankid-container iframe"));
driver.SwitchTo().Frame(contentFrame);

//Now find the elements you want in the nested frame
IWebElement foo = driver.FindElement(By.CssSelector("input[type='password']"));

Note: I'm not C# developer, hope above syntax is correct.

Nael Marwan
  • 1,030
  • 1
  • 13
  • 32
  • Thank you @NaelAbdeljawad for your response. I get stuck on the previous page when running your code. I get an error: "OpenQA.Selenium.NoSuchElementException : no such element: Unable to locate element: {"method":"css selector","selector":"#ifmSingicat"}" – Joel Wiklund Dec 08 '19 at 16:00
  • Yes I can, but as soon as I try to switch to an iframe I get that error message. I guess it hasn't loaded yet? – Joel Wiklund Dec 08 '19 at 18:30
  • You can debug and add breakpoint at the first switch or to add thread sleep for few seconds to find out the issue. I suggest to watch the browser behaviors while running your script. – Nael Marwan Dec 08 '19 at 18:42
1

The field associated with the text Engangskode is within a #shadow-root (open) which is with in a child <iframe> which is within the parent <iframe>. So to send a character sequence to the desired field you need to:

  • Induce WebDriverWait for the parent frame to be available and switch to it.
  • Induce WebDriverWait for the child frame to be available and switch to it.
  • Induce WebDriverWait for the desired ElementToBeClickable() which is with in the #shadow-root (open).

shadowDOM_password_field

  • You can use the following solution:

    new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.FrameToBeAvailableAndSwitchToIt(By.CssSelector("iframe#ifmSingicat")));
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.FrameToBeAvailableAndSwitchToIt(By.CssSelector("iframe[title='BankID']")));
new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable((IWebElement)((IJavaScriptExecutor)driver).ExecuteScript("return document.querySelector('div.full_width_height').shadowRoot.querySelector('input')"))).SendKeys("02105892090");

  • Browser Snapshot:

shadowDOM_password

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • 1
    Thank you very much @DebanjanB! With some modifications it finally worked. Added my solution to the original post. – Joel Wiklund Dec 10 '19 at 07:17
0

If you are switched to correct iframe, then it just that you need to add some wait. It will provide some time to iframe elements to get loaded.

Dish
  • 117
  • 8