title: How to close modal dialog on web page using web driver - Java
body: <p>I'm trying to close dialog that appears on a web page using mainly selenium web driver and Java but without any results. My code: </p>
  
  <pre><code>   @When("^I am on second page I click on close button in pop up$")
      public void i_am_on_second_page_I_click_on_close_button_in_pop_up() throws Throwable {
          driver.findElement(By.xpath("//*[@id=\"ngdialog2\"]/div[2]/promo-banner/div/div/div[2]/div/dialog-body/div[1]/div[2]")).click();
          driver.switchTo().activeElement();
  </code></pre>
  
  <p>I get:<code>java.lang.NullPointerException</code></p>
  
  <pre><code>java.lang.NullPointerException
      at SeconPage.i_am_on_second_page_I_click_on_close_button_in_pop_up(SeconPage.java:17)
      at ✽.When I am on second page I click on close button in pop up(SeconPage.feature:7)
  </code></pre>
  
  <p>What I'm missing?</p>
  
  <pre><code>&lt;div class="dialog-body"&gt;
      &lt;div ng-transclude="dialogBodySlot"&gt;
          &lt;dialog-body&gt;
              &lt;div class="promo-popup-top"&gt;
                  &lt;picture&gt;&lt;img class="promo-popup-image"
                                ng-srcset="/etc/designs/ryanair/frontend/resources/ui/illustrations/products/family-popup.png, /etc/designs/ryanair/frontend/resources/ui/illustrations/products/family-popup@2x.png"
                                srcset="/etc/designs/ryanair/frontend/resources/ui/illustrations/products/family-popup.png ,/etc/designs/ryanair/frontend/resources/ui/illustrations/products/family-popup@2x.png"&gt;
                  &lt;/picture&gt;
                  &lt;div class="icon-115 promo-popup-icon-family"&gt;&lt;img
                          ng-src="/etc/designs/ryanair/frontend/resources/ui/illustrations/products/family-extra-logo.png"
                          src="/etc/designs/ryanair/frontend/resources/ui/illustrations/products/family-extra-logo.png"&gt;
                  &lt;/div&gt;
                  &lt;div class="promo-popup-close" ng-click="$ctrl.onClose()"&gt;
                      &lt;core-icon class="icon-16 fill-c-light-base" icon-id="glyphs.close"&gt;
                          &lt;div&gt;
                              &lt;svg tabindex="-1" focusable="false" role="img"&gt;
                                  &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/pl/pl/#glyphs.close"
                                       ng-href="/pl/pl/#glyphs.close"&gt;&lt;/use&gt;
                              &lt;/svg&gt;
                          &lt;/div&gt;
                      &lt;/core-icon&gt;
                  &lt;/div&gt;
                  &lt;div class="popup-message-shadow"&gt;&lt;!----&gt;&lt;p ng-if="::!$ctrl.firstName" class="first-message"
                                                              translate="common.components.family_extra_popup.message1"
                                                              translate-default=""&gt;Witaj!&lt;/p&gt;&lt;!----&gt;&lt;!----&gt;&lt;h3
                          class="second-message" translate="common.components.family_extra_popup.message3"
                          translate-default=""&gt;&lt;span class="yellow-text"&gt;Zaoszczędź &lt;/span&gt;na kolejnej podróży dzięki
                      naszym super ofertom &lt;span class="yellow-text"&gt;Family Extra&lt;/span&gt;&lt;/h3&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="promo-popup-benefits family"&gt;
                  &lt;ul class="family-benefits-list"&gt;&lt;!----&gt;
                      &lt;li ng-repeat="benefit in ::$ctrl.popupBenefits track by $index" class="family-benefit"&gt;
                          &lt;core-icon class="icon-40 family-benefit-icon"
                                     ng-class="::$ctrl.popupResources.class + '-benefit-icon'" icon-id="baggage"&gt;
                              &lt;div&gt;
                                  &lt;svg tabindex="-1" focusable="false" role="img"&gt;
                                      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/pl/pl/#baggage"
                                           ng-href="/pl/pl/#baggage"&gt;&lt;/use&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                          &lt;/core-icon&gt;
                          &lt;span class="family-benefit-text" translate="common.components.family_extra_popup.benefit1"
                                translate-default=""&gt;50% zniżki na bagażu (15&amp;nbsp;kg) dzieci&lt;/span&gt;&lt;/li&gt;&lt;!----&gt;
                      &lt;li ng-repeat="benefit in ::$ctrl.popupBenefits track by $index" class="family-benefit"&gt;
                          &lt;core-icon class="icon-40 family-benefit-icon"
                                     ng-class="::$ctrl.popupResources.class + '-benefit-icon'"
                                     icon-id="priority-boarding"&gt;
                              &lt;div&gt;
                                  &lt;svg tabindex="-1" focusable="false" role="img"&gt;
                                      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink"
                                           xlink:href="/pl/pl/#priority-boarding"
                                           ng-href="/pl/pl/#priority-boarding"&gt;&lt;/use&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                          &lt;/core-icon&gt;
                          &lt;span class="family-benefit-text" translate="common.components.family_extra_popup.benefit2"
                                translate-default=""&gt;50% zniżki na usługę Priority Boarding dla dzieci&lt;/span&gt;&lt;/li&gt;&lt;!----&gt;
                      &lt;li ng-repeat="benefit in ::$ctrl.popupBenefits track by $index" class="family-benefit"&gt;
                          &lt;core-icon class="icon-40 family-benefit-icon"
                                     ng-class="::$ctrl.popupResources.class + '-benefit-icon'" icon-id="insurance-shield"&gt;
                              &lt;div&gt;
                                  &lt;svg tabindex="-1" focusable="false" role="img"&gt;
                                      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink"
                                           xlink:href="/pl/pl/#insurance-shield" ng-href="/pl/pl/#insurance-shield"&gt;&lt;/use&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                          &lt;/core-icon&gt;
                          &lt;span class="family-benefit-text" translate="common.components.family_extra_popup.benefit3"
                                translate-default=""&gt;50% zniżki na ubezpieczenie dla dzieci&lt;/span&gt;&lt;/li&gt;&lt;!----&gt;
                      &lt;li ng-repeat="benefit in ::$ctrl.popupBenefits track by $index" class="family-benefit"&gt;
                          &lt;core-icon class="icon-40 family-benefit-icon"
                                     ng-class="::$ctrl.popupResources.class + '-benefit-icon'" icon-id="seat"&gt;
                              &lt;div&gt;
                                  &lt;svg tabindex="-1" focusable="false" role="img"&gt;
                                      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/pl/pl/#seat"
                                           ng-href="/pl/pl/#seat"&gt;&lt;/use&gt;
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                          &lt;/core-icon&gt;
                          &lt;span class="family-benefit-text"
                                translate="common.components.family_extra_popup.mandatory_seat_benefit"
                                translate-default=""&gt;Darmowe miejsca rezerwowane dla dzieci poniżej 12. roku życia&lt;/span&gt;
                      &lt;/li&gt;&lt;!----&gt;&lt;/ul&gt;
                  &lt;button class="core-btn-primary core-btn-phone-full" ng-click="$ctrl.onClose()"
                          translate="trips.biz_plus_popup.close" translate-default=""&gt;Kontynuuj wyszukiwanie
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/dialog-body&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>