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

1. Introduction

Today, Hong shared in the actual testing work rarely encountered, more out-of-the-way, if suddenly encountered we may be brain big, confused, a moment do not know how to do? So macro here to provide a way of thinking for everyone to learn and reference.

synopsis

svg is also a new tag in html5, it is very similar to canvas. It can realize drawing and animation. But svg draw out are vector graphics, unlike canvas is in pixels, put the big fuzzy. svg draw out of the picture is not. svg English full name is Scalable vector Graphics, meaning scalable vector graphics, this element is more special, you need to use the name () function to locate.

Element Drag and Drop

3.1svg drag and drop demo

Under the circle element can be dragged, macro online to find half a day did not find, and then do it yourself to write a demo for the demonstration (you can see the circle of the cx and cy in the process of dragging and dropping constantly changing), as shown below:

The reference code for the

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Beijing, capital of People's *-* businessman</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
       
    </style>
</head>
<body>
    <svg width="500" height="300" id="svg-container">
        <circle cx="100" cy="100" r="20" fill="blue" id="draggable-circle"></circle>
    </svg>
</body>
    <script>
        // Getting SVG containers and draggable elements
        const svgContainer = ('svg-container');
        const draggableElement = ('draggable-circle');
         
        let isDragging = false;
        let startX, startY;
         
        // Mouse press event handler
        function dragStart(event) {
          isDragging = true;
          startX =  - parseInt(('cx')),
          startY =  - parseInt(('cy'));
          // Blocking default drag-and-drop behavior
          ();
        }
         
        // Mouse over event handler
        function drag(event) {
          if (isDragging) {
            const dx =  - startX;
            const dy =  - startY;
            ('cx', dx);
            ('cy', dy);
          }
        }
         
        // Mouse up event handler
        function dragEnd(event) {
          isDragging = false;
        }
         
        // Adding event listeners
        ('mousedown', dragStart);
        ('mousemove', drag);
        ('mouseup', dragEnd);
    </script>
</html>

3. Next, we use the svg demo to demonstrate drag and drop, in fact, in our last master how to locate the svg element, drag and drop is very simple, is nothing more than some of the mouse operation events.

3.2 Code design

3.3 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-27
@author: Beijing, capital of People's *-* businessman
Public No.: Beijing Hong (WeChat search: Beijing Hong, follow Hong, unlock more testing dry goods in advance!)
Project:The Latest Out of the Box Series - Python+Playwright Automation Testing - 64 - Canvas and SVG Element Push and Pull
'''

# 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()
    ("C:/Users/Administrator/Desktop/")
    page.wait_for_timeout(1000)
    # svg element positioning
    circle = ('//*[name()="svg"]/*[name()="circle"]')
    print(circle.bounding_box())
    box = circle.bounding_box()
    # svg element drag and drop
    (x=box['x'] + box['width'] / 2, y=box['y'] + box['height'] / 2)
    ()
    (x=box['x'] + box['width'] / 2 + 100, y=box['y'] + box['height'] / 2)
    ()
    page.wait_for_timeout(5000)
    ()
    ()
    ()
with sync_playwright() as playwright:
    run(playwright)

3.4 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 action (l blue circle was dragged away). As shown in the figure below:

Element Drag and Drop

4.1canvas drag and drop demo

Under the elements can be dragged, macro online to find half a day did not find, and then do it yourself to write a demo for the demonstration (you can see the style of the circle in the process of dragging and dropping constantly changing), as shown below:

The reference code for the

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Beijing, capital of People's *-* businessman</title>
  <style>
      canvas {
            border: 1px solid black
        }
       
    </style>
</head>
<body>
    
</body>
    <script>
       const canvas = ('canvas')
         = 400
         = 400
         = 'canvas'
        (canvas)
        let ctx = ('2d') //brushes

        // status flag
        const statusConfig = {
          IDLE: 0, //
          DRAGSTART: 1, //Mouse over
          DRAGGING: 2 //attacking and pulling at tug-of-war
        } 

        // Canvas Information
        const canvasInfo = {
          status: , //state of affairs
          dragTarget: null, //drag-and-drop (computing)
          lastEvtPos: { //Previous position
            x: null, 
            y: null
          },
          offsetEvtPos: { //Previous Offset
            x: null,
            y: null
          }
        }

        let circles = [] //Stored Drawn Circles

        // draw a circle
        const drawCircle = (ctx, cx, cy, r) => {
          ()
          () //Start drawing.

          (cx, cy, r, 0,  * 2)
           = 'pink'
           = 'pink'
          () //Stroke Mode
          ()

          () //close
          ()
        }

        drawCircle(ctx, 100, 100, 10)
        // Store the position of the circle
        ({
          x: 100,
          y: 100,
          r: 10
        })
        drawCircle(ctx, 200, 150, 20)
        ({
          x: 200,
          y: 150,
          r: 20
        })


        // Element Drag and Drop Canvas coordinates for mouse
        const getCanvasPostion = e => {
          return {
            x: , //The position of the mouse in the page while subtracting the offset of the canvas element itself
            y: ,
          }
        }

        // Distance between two points
        const getInstance = (p1, p2) => {
          // The exponentiation operators **, which self-multiply ( - ) and ( - ), respectively.
          return (( - ) ** 2 + ( - ) ** 2)
          // or
          //  function, which is used to calculate the specified power of a specified number.
          // return ((( - ), 2) + (( - ), 2))
        }

        // Determine if the mouse is inside a circle
        const ifInCirlce = (pos) => {
          for (let i = 0; i < ; i++) {
            if (getInstance(circles[i], pos) < circles[i].r) {
             return circles[i]
            }
          }
          return false
        }

        //  Mouse click listener
        ('mousedown', e => {
          const canvasPostion = getCanvasPostion(e)
          const circleRef = ifInCirlce(canvasPostion)
          if (circleRef) {
            (circleRef);
             = circleRef //drag-and-drop (computing)
             = 
             = canvasPostion
             = canvasPostion
          }
        })

        // Mouse over
        ('mousemove', e => {
          const canvasPostion = getCanvasPostion(e)
          const {dragTarget} = canvasInfo
          if (ifInCirlce(canvasPostion)) {
             = 'all-scroll'
          }else {
             = ''
          }
          if (!dragTarget) return
          if ( ===  && getInstance(canvasPostion, ) > 5) {
            ('try to drag');
             = 
             = canvasPostion
          }else if( === ){
            ('draging');
             += ( - )
             += ( - )  //Offset-based
            (0,0, , )  //Empty Canvas
            (c => drawCircle(ctx, , , ))
             = canvasPostion
          }
        })


        ('mouseup', e => {
           = 
        })

        ('mouseleave', e => {
           = 
           = ''
        })
    </script>
</html>

3. Next, we use the above canvas demo to demonstrate the drag and drop, the same reason: in fact, in our last master how to locate the canvas element, drag and drop is very simple, it is just some of the mouse operation events. However, in practice, we found that it is not simple, although we can locate it, but we can't operate it. Macro think the reason may be the canvas is positioned to the whole piece of canvas, and its upper edge of the circle is through the painting out, can not be positioned so it can not be operated. And press F2 to view the element does not have a circle element. As shown in the figure below:

5. Summary

Today, the main explanation and share the SVG element positioning and dragging, the practice process found that canvas can not drag and drop, there can be achieved by dragging the partners or children can leave a message to the macro brother ha, we learn together to make progress. Well, today time is not early, Hong brother will explain and share here, thank you for your patience to read, I hope to help you.

A First Look at the "New Out of the Box" Series - Python+Playwright Automated Testing - 64 - Canvas and SVG Element Push and Pull

1. Introduction

synopsis

Element Drag and Drop

3.1svg drag and drop demo

3.2 Code design

3.3 Reference code

3.4 Running the code

Element Drag and Drop

4.1canvas drag and drop demo

5. Summary