Objective:
By pressing on a custom link, you are directed to a webpage where the screen displays specific text - "Padding - Shorthand Property".
The aim is to use Assert.IsTrue to ensure that the padding shorthand property and its content are within the visible computer screen.
Issue:
I am uncertain if it is possible to achieve this using Selenium with C#.
I am unsure of where to begin.
https://i.sstatic.net/y3Gw4.png
Thank you!
When working with Selenium alone, it can be challenging to determine if an element is visible on the screen. However, by incorporating JavascriptExecutor, we can achieve this task efficiently. By utilizing JavascriptExecutor, we can locate the desired element and pass it to the IsElementInView() function. This function will execute Javascript commands to ascertain the position of the element in relation to the browser window's dimensions.
top < 0, the element is positioned above the visible area of the screen.bottom > height, the element extends beyond the bottom of the screen.left < 0, the element is off-screen to the left.right > width, the element is located outside the visible area to the right.If any of the specified conditions are met, then the element is considered to be off-screen. Alternatively, if none of these conditions apply, the element is deemed to be within the viewable area.
class Program
{
static IWebDriver driver;
static void Main(string[] args)
{
IWebDriver driver = new FirefoxDriver();
driver.Manage().Window.Maximize();
String searchText = "Padding - Shorthand Property";
driver.Navigate().GoToUrl("http://www.w3schools.com/css/css_padding.asp");
IWebElement e = driver.FindElement(By.XPath("//h2[text()=" + searchText + "]"));
Console.WriteLine(IsElementInView(e));
}
public static Boolean IsElementInView(IWebElement e)
{
IJavaScriptExecutor jse = (IJavaScriptExecutor)driver;
Double top = (Double)jse.ExecuteScript("return arguments[0].getBoundingClientRect().top", e);
Double bottom = (Double)jse.ExecuteScript("return arguments[0].getBoundingClientRect().bottom", e);
long left = (long)jse.ExecuteScript("return arguments[0].getBoundingClientRect().left", e);
long right = (long)jse.ExecuteScript("return arguments[0].getBoundingClientRect().right", e);
long width = (long)jse.ExecuteScript("return window.innerWidth");
long height = (long)jse.ExecuteScript("return window.innerHeight");
if (top < 0 || bottom > height || left < 0 || right > width)
{
return false;
}
return true;
}
}
I have a webpage that automatically refreshes every 30 seconds with new random content. I am currently using a meta tag to achieve this, but I recently read an article stating that meta refresh is not SEO friendly. Can you suggest a more SEO-friendly metho ...
Currently, I am focused on automation testing using Selenium with Java. In my current scenario, the first step involves opening the login page and then providing credentials before clicking the Login button. After this action is completed, the current brow ...
When it comes to having list items with images on the left and text on the right, the issue arises when each image is of a different width. This can cause the text to not align vertically next to their respective images. Is there a way to ensure that t ...
Could you please review the following code snippet: http://www.jsfiddle.net/tt13/5CxPr/21 In Firefox, there is a strange blue border that appears when selecting multiple rows by pressing the ctrl button. However, this issue does not occur in Chrome. Thi ...
Scenario After coming across a thought-provoking XKCD comic, I decided to craft a script that would bring the comic's concept to life: javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+ ...
I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible ...
I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...
Currently, I'm struggling to figure out why the String.Remove method isn't functioning properly in a specific situation of mine. There's a method I created (just for practice) that deletes a character within a string based on a specified pos ...
I have searched extensively using search engines, but so far I have been unable to find a solution. I'm using C# and Selenium for automating some web pages. Right now, I am facing an issue with a login button. The webpage in question is: Entering th ...
I am looking to dynamically populate the options in a second drop-down based on the selection made in the first drop-down. For instance, if I have a first drop-down with options {India, South Africa, USA}, and I choose India, then the second drop-down shou ...
I'm having trouble accessing a website - https://... The cloudflare security feature is obstructing the selenium driver. Currently, I am using https://github.com/seleniumbase/SeleniumBase, which supports undetected drivers, but it's not working ...
Would like to display image previews when a user selects them before uploading, but my Vue skills are lacking. Struggling with applying background image URLs to each div element in the UploadComponent: <template> <div class="content" ...
I'm having trouble replacing a p tag with a span while keeping the actual content intact. Can anyone assist me with this, please? $('.anim-letters p').replaceWith( "<span class='letters'>" + $('this').text() + "< ...
While translating the syntax below to SQL, LINQ moves the inner where clause to the outer query, which can be detrimental to the database performance. Despite my experience with writing SQL for a long time and working with Hibernate's HQL, I'm st ...
I have encountered a situation where I need to center text within a div that also has an aspect ratio. Since the aspect-ratio property is not supported by major browsers like Safari, I am looking for an alternative solution. Here is my current code: .a ...
Can someone help me verify the accuracy of my datetime range logic? I want to make sure that any dates falling within an unavailable date range are excluded. For example, if Start 17/10/2018 - 22:35 || End 17/10/2018 23:00 was marked as unavailable, then ...
I am looking to rearrange the brand and toggle button on mobile view if the screen size is small enough. The brand icons should be on the right side in desktop view, while the links should be displayed normally. Examples: Desktop: +--------------------- ...
I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...
I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with. However, when I use an image, it initially appears outside o ...
I have the following code snippet in a React JS application: const items = [ { value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }, { value: " ...