Making sure an image is visible using Webdriver

I'm facing an issue where an image disappears after reaching a certain width size. I'm unsure how to address this using Selenium.

<img id="removeimg" class="col-md-5" src="images/abc-image.png" alt="abc"> 

Below is the corresponding CSS code.

@media only screen and (max-width: 991px) {
#removeimg  {
    display: none;
}

I've written some Java test code for this scenario, but I have doubts about its correctness.

@BeforeClass
public static void setUp() throws Exception {
    driver = new RemoteWebDriver(new URL(System.getProperty("webDriverUrl")), DesiredCapabilities.firefox());
    driver.manage().window().setSize(new Dimension(991, 1100));
    baseUrl = System.getProperty("baseUrl");
    driver.get(baseUrl + "/");
}

@Test
public void testImageNotPresent(){
    driver.findElements(By.id("removeimg");
  }

UPDATE

I made an update to my Java test code.

@Test
public void testImageNotPresent(){
    driver.findElement(By.id("removeimg")).isDisplayed();
    assertFalse(isElementPresent(By.id("removeimg")));
}

However, this test case fails when executed. The goal is for it to pass if the image is not visible on the page, but fail if it is visible.

Answer №1

Try using a combination of setSize() and isDisplayed() methods:

WebElement image = driver.findElement(By.id("removeimg"));

driver.manage().window().setSize(new Dimension(991, 1100));
System.out.println(image.isDisplayed()); 

driver.manage().window().setSize(new Dimension(800, 600));
System.out.println(image.isDisplayed()); 

To learn more about how selenium webdriver determines visibility, check out this specification:

Answer №2

Successfully figured out how to make it function properly.

@Test
public void verifyImageNotDisplayed(){
    WebElement image = driver.findElement(By.id("removeimg"));
    assertEquals("none", image.getCssValue("display"));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

Is it possible to execute a program on MacOS through a local HTML website?

Are there any straightforward methods to launch Mac programs using HTML? I've created an HTML page featuring a text field and several buttons. The goal is for users to enter a code (numbers) that will then be copied to the clipboard. By clicking on t ...

Node.js provides a straightforward way to decode HTML code

Can strings with HTML-encoded characters like &#39;, &amp;, etc., be converted into plain character strings without using multiple str.replace(/&#39;/g, "'") statements? ...

How can CSS image hover affect the layout of other elements on the page?

When I hover over the image and it grows to 350px, it causes everything around it to shift. The code is functioning as expected, but the issue arises when the enlarged image pushes nearby elements downward. Is there a way to prevent this behavior? #disp ...

Error in starting activity: ComponentInfo (1382) java.lang.RuntimeException: Unable to execute

Upon starting my application, I encounter a problem that I am trying to pinpoint. Here is what I see in the log cat: 09-08 12:40:35.690: W/dalvikvm(1382): threadid=1: thread exiting with uncaught exception (group=0x40015560) 09-08 12:40:35.740: E/Android ...

"Is there a way to reverse the action of $( "button" ).remove()

Currently, I have implemented JQuery's $( ".button" ).remove(); function to get rid of all the buttons on my webpage immediately after a user clicks the print PDF button that changes the HTML page into a PDF. Nevertheless, once this process is done ...

Sending text from a Tinymce textarea using Laravel 4.2

I am currently facing an issue with a form that includes a tinymce textarea, allowing users to edit text and save it into a database with HTML tags for display on their profile. The problem arises when Laravel 4.2 escapes the HTML tags, making it difficult ...

The sizing of elements in Firefox seems to be off when using percentage

I am facing an issue with a page that has 3 td elements all set at a width of 33.333333%. In Firefox, the browser seems to be computing it as an actual pixel value of 568px, causing the containers to run off the page. I have not defined any fixed widths in ...

What causes the error "ReferenceError: until is not defined" when utilizing the built-in webdriver wait function?

It seems that Webdriverjs has a convenient built-in method for waiting for an element to appear. var saveButton = driver.wait(until.elementLocated(By.xpath("//div[text() = 'Save']")), 5000); driver.wait(until.elementIsVisible(saveButton), 5000). ...

Unable to open links specified in 'href' with Bootstrap 5 Navbar

After finishing developing my first page, I encountered an issue while working on the second page. I am using a bootstrap 5 navigation bar. The way I have set up the navbar is that once it reaches a breaking point, I disable the view to allow the full bar ...

What are some creative ways to design drop-down menus within an email?

The snippet of code I am currently using lacks the ability to format text, and it does not allow content below dropdown items to shift down properly in an email. <select> <option value="first">First-time users of the Vanguard Events app:&l ...

Adding a request parameter to an ajax Request for a jQuery dataTable that has been initialized from JSON and mapped by Spring can be achieved by including

I have a jQuery dataTable that is initialized from jSON and mapped by a Spring framework. Currently, I am not passing any parameters and retrieving all information. However, I now need to pass a single String to the Java method, most likely through a requ ...

Tips on toggling between slides with Bootstrap Carousel

I am in the process of designing a portfolio website and have encountered a challenge. I want to divide it into two sections - a brief introduction and a carousel for showcasing projects. While I have managed to set up both sections, I'm facing an iss ...

Introducing the brand new feature: Video Mute Button!

Currently, I am working on implementing a mute button for a video on my webpage. The background of my page consists of a looping video with no other content, but the sound becomes quite bothersome after a while. While I have managed to find a button to pau ...

contenteditable -- Utilizing AngularJS to create a block element for the title only

When I click on an input field that is editable, I want the background color to change to white within the box. Can someone please assist me with this? Below is my code: HTML <div id="section{{section.index}}"> <h2 class="title" contentedit ...

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

C# code that generates HTML buttons for redirection

I've been working on developing a C# string builder that will be used to construct an HTML page using data from a database and user input. My current challenge involves adding two buttons to the string - one that redirects to a.asp and the other to b ...

What might be causing the background color to remain the same when focusing on a div element

I am trying to change the background color of a parent div when an input field within it is in focus using CSS only. However, my current code does not seem to be working as expected. This is what I have tried: .a:focus{ background-color:red; border:2 ...

What is the best way to make an image expand when clicked, align it in the center of the webpage, and have it return to its original position with just one more click by utilizing

Currently, this is the code I am working with. The JavaScript functionality is working well, however, there seems to be an issue where the image does not return to its original size on a second click. Additionally, I am having trouble getting the CSS to ce ...

"Experiencing a Semantical Error is common when working exclusively with Behat

Greetings to the StackOverflow community, I am a fresh member here and this marks my debut question :) Presently, I'm utilizing Symfony2. When I personally visit a page using my Firefox browser: http://localhost:8000/vendor/add-product The webpage ...