Unable to click image in Wordpress text editor

Question

A test case where image and content are to be added in WP text editor under post section.

I want to select the image that is uploaded in the editor but it always says "Unable to locate element"

XPath I tried is : //*[@id="tinymce"]/p[2]/img

HTML :

Answer 1

Your image element is in iFrame, So first you need to switch into related iFrame and then you can perform desired actions on that element.

There are following ways provided in the Selenium to work with iframes :

Switch using frame Index

driver.switchTo().frame(0); // used indexes 0,1... as number of frames you have in webpage

Switch using frame id (if your iframe have id attribute)

driver.switchTo().frame(frame_id);

Switch using webelement (locate the frame as webelement)

WebElement frame = driver.findElement(By.xpath("frame_xpath"));
driver.switchTo().frame(frame);

Apart from these you can also use ExplicitWait conditions to switch into frame e.g.

new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("your_frame_id")));

In your case you have to switch in and perform your actions e.g. :

driver.switchTo().frame(0);
driver.findElement(By.cssSelector(".alignnone.size-full.wp-image-399")).click();

You can use driver.switchTo().defaultContent(); to move out from frame.

Answer 2

From looking into the html code it seems there is an iframe from which you are accessing the element. In this automation testing services issue is related to accessing the element inside an iframe. Selenium treats iframe like a window. So you first need to switch to that window(which is an iframe here). You need to switch to iframe first and then search for the element you were looking for.

Below is the simple code related to for reference using this not only you any one could fix such type of issues:

First get the iframe name from the html code and then use webdriver method to switch to the iframe as (say iframe id is 'first-frame')

// Switch to frame
driver.switchTo().frame("first-frame");

// now search for the element you want to search
driver.findElement(By.xpath("//*[@id="tinymce"]/p[2]/img")).click();

// Now switch back to main window which is done by this code.
driver.switchTo().defaultContent();

Last code snippet is necessary to access other elements outside from the iframe.

Hope that helps.