A First Look at the "New Out of the Box" Series - Python+Playwright Automated Testing - 61

1. Introduction

For the front-end hidden elements, has been the automation of positioning elements of the invisible killer, so that people can not defend. Scripts run to the hidden elements when the location of the Times a variety of errors, but there is no way to avoid this hidden drop-down menu, so a very big headache, this one is only for the exchange of hidden elements to automate the positioning of processing methods as well as a little bit of their own shallow insights macro.

2.What is a hidden element

Hidden elements, familiar with the front-end or HTML partners or children's shoes must not be unfamiliar with the attributes of the element to hide and display, mainly type = "hidden" and style = "display: none;" attribute to control, of course, there are other ways to control, macro here is not a detailed description of the interest of the partners or children's shoes can check their own! What is a hidden element? What is a hidden element? A hidden element is an element that is hidden by the attribute hidden="hidden". If it appears in the front-end code, it means that the element has been hidden, and we all know that there is no way to manipulate the element if it is hidden, the so-called manipulation is to input, click, and clear these basic element operations. If you click to operate the element through selenium, it will report an error, the element information is not found, also introduced earlier, hidden elements can only be located, but there is no way to operate.

1. There are two input boxes and a login button that would have been displayed as shown below:

2. Next, make it hidden inside the login element attribute, as shown in the code below:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Login</title>  
    <link rel="stylesheet" type="text/css" href=""/>  
</head>  
<body>  
    <div >  
        <h1>Beijing Hong</h1>  
        <form method="post">  
            <input type="text" required="required" placeholder="Username" name="u"></input>  
            <input type="password" required="required" placeholder="Password." name="p"></input>  
            <button  class="but" type="submit" style="display: none;" onclick="display_alert()">log in</button>                
        </form>          
    </div>  
</body>
<script type="text/javascript">
    function display_alert(){
      alert("Please follow the public number: Beijing Hong")
    }
</script>  
</html>

This way the Login button will not be displayed, as shown below:

3. Locate hidden elements

Macro said earlier, positioning hidden elements and ordinary elements are no difference, the next to verify, is not able to locate it? In fact, the previous article has been verified, may be small partners or children's shoes did not pay attention or noticed, then macro here again to verify.

3.1 Code design

3.2 Reference code

# coding=utf-8🔥

# 1. First set the encoding, utf-8 can support Chinese and English, such as the above, generally placed in the first line

# 2. Notes: including record creation time, creator, project name.
'''
Created on 2024-05-15
@author: Beijing, capital of People's *-* businessman
Public No.: Beijing Hongge (WeChat search: Beijing Hongge, pay attention to Hongge, unlock more testing dry goods in advance!)
Project: The Latest Out of the Box Series - Python+Playwright Automation Testing - 61 - Hidden Element Positioning and Manipulation
'''

# 3. Import module

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = (headless=False)
    context = browser.new_context()
    page = context.new_page()
    ("E:\\Desktop\\test\\hidden\\")
    loginButton = ("#bjhg")
    print(loginButton.get_attribute("name"))
    # hidden elements through the id positioning, and then to determine (previous two methods)
    print(page.is_visible("#bjhg"))
    print(("#bjhg").is_visible())
    page.wait_for_timeout(1000)
    print("browser will be close")
    ()
    ()
    ()
with sync_playwright() as playwright:
    run(playwright)

3.3 Running the code

1. Run the code, right click Run 'Test', you can see the console output, as shown below:

2. Run the code after the browser action on the computer side. As shown in the figure below:

The result of the run shows that the hidden element is in fact positioned using the normal positioning method, and there is no difference in the positioning of the normal element! Don't think there's anything special about it that requires a special positioning method.

4. Manipulate hidden elements

We all know Palywright operation method is through the simulation of human operation method, then the elements are not visible, there is no such thing as operation is not operated, if you really want to operate, we can use the JS syntax introduced by the former macro to operate, because the JS syntax belongs to the front-end code directly to operate, hidden elements in the HTML code exists, hidden hidden elements exist in the HTML code, hidden elements are mainly invisible to the front-end page.

Hidden elements can be positioned normally, just can not operate (positioning elements and operating elements are two different things, a lot of beginners or interviewers sometimes can not distinguish), operating elements are click, clear, sendKeys these methods.

//Click to hide login box
loginButton= ("#bjhg")
()

4.1 Code design

Designing the code along the lines of the above is very simple.

4.2 Reference code

# coding=utf-8🔥

# 1. First set the encoding, utf-8 can support Chinese and English, such as the above, generally placed in the first line

# 2. Notes: including record creation time, creator, project name.
'''
Created on 2024-05-15
@author: Beijing, capital of People's *-* businessman
Public No.: Beijing Hongge (WeChat search: Beijing Hongge, pay attention to Hongge, unlock more testing dry goods in advance!)
Project: The Latest Out of the Box Series - Python+Playwright Automation Testing - 61 - Hidden Element Positioning and Manipulation
'''

# 3. Import module

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = (headless=False)
    context = browser.new_context()
    page = context.new_page()
    ("E:\\Desktop\\test\\hidden\\")
    loginButton = ("#bjhg")
    # Manipulating hidden elements
    ()
    print(loginButton.get_attribute("name"))
    # hidden elements through the id positioning, and then to determine (previous two methods)
    print(page.is_visible("#bjhg"))
    print(("#bjhg").is_visible())

    page.wait_for_timeout(1000)
    print("browser will be close")
    ()
    ()
    ()
with sync_playwright() as playwright:
    run(playwright)

4.3 Running the code

1. Run the code, right click Run 'Test', you can see the console output (reported errors), as shown below:

2. Run the code after the computer side of the browser's actions (see did not trigger the click event, pop-up window, and finally reported an error). As shown in the figure below:

Hiding an element with the click() method throws the exception "element is not visible - waiting...". This error is saying that the element is not visible - waiting... Similarly for the input box on the "Login" button, if it is hidden, performing an input (type) operation will also throw an error.

Manipulating hidden elements

Palywright and Selenium is the same can not operate hidden elements ( but can be positioned normally ), itself this framework is designed so that, if you have to go to operate the hidden elements, then use the js method to operate, Palywright provides an entry point can be executed js script. Palywright provides an entry point for executing js scripts. js and Palywright are different, only the elements on the page (inside the dom), can be operated normally, the next js try it!

Then continue to refine the code above that can be located but not manipulated.

5.1 Code Design

5.2 Reference code

# coding=utf-8🔥

# 1. First set the encoding, utf-8 can support Chinese and English, such as the above, generally placed in the first line

# 2. Notes: including record creation time, creator, project name.
'''
Created on 2024-05-15
@author: Beijing, capital of People's *-* businessman
Public No.: Beijing Hongge (WeChat search: Beijing Hongge, pay attention to Hongge, unlock more testing dry goods in advance!)
Project: The Latest Out of the Box Series - Python+Playwright Automation Testing - 61 - Hidden Element Positioning and Manipulation
'''

# 3. Import module

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = (headless=False)
    context = browser.new_context()
    page = context.new_page()
    ("E:\\Desktop\\test\\hidden\\")
    loginButton = ("#bjhg")
    # Manipulating hidden elements
    js = "('bjhg').click()"
    page.wait_for_timeout(10000)
    (js)
    print(loginButton.get_attribute("name"))
    # hidden elements through the id positioning, and then to determine (previous two methods)
    print(page.is_visible("#bjhg"))
    print(("#bjhg").is_visible())

    page.wait_for_timeout(1000)
    print("browser will be close")
    ()
    ()
    ()
with sync_playwright() as playwright:
    run(playwright)

5.3 Running the code

1. Run the code, right click Run 'Test', you can see the console output, as shown below:

2. Run the code after the computer side of the browser's action (trigger click event, pop-up window, after running, you will find the page normal click, pop-up to follow Hong's public number window.) . As shown in the figure below:

6. Summary

6.1 Simplified code

Baidu searched the possible method is to use js to remove the hidden attribute, and then use selenium operation, this is a little redundant, since you already know how to use js, why not once in place directly click it? And macro found before the explanation of this method, a little "out of pants exhaust". Here macro corrected, direct one-step ha!

6.2 Interview questions

If the interviewer wants to ask about manipulating hidden elements after positioning, essentially the question is meaningless, the purpose of web automation is to simulate normal human behavior to operate. If an element is not visible on the page, you can't operate it manually, can you? If you can't operate manually, what is the significance of automation? So this is just to simply examine the interviewer's ability to deal with the problem, there is no practicality! (Interview to build an airplane, go in to screw) Since the interviewer asked, then find a way to answer on to give a good impression of it! Remember to make sure not to dislike the interviewer, or your this interview is cool ah!

Well, it's getting late today, so Hiro will explain and share here, thanks for your patience in reading! Don't forget to support if you like Hong!!!!

A First Look at the "New Out of the Box" Series - Python+Playwright Automated Testing - 61 - Hidden Element Locating and Manipulating

1. Introduction

2.What is a hidden element

3. Locate hidden elements

3.1 Code design

3.2 Reference code

3.3 Running the code

4. Manipulate hidden elements

4.1 Code design

4.2 Reference code

4.3 Running the code

Manipulating hidden elements

5.1 Code Design

5.2 Reference code

5.3 Running the code

6. Summary

6.1 Simplified code

6.2 Interview questions