Results 1 to 8 of 8

Thread: How to get SVG circle component in sencha studio webdriver test

  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    5
    Vote Rating
    0
      0  

    Default Answered: How to get SVG circle component in sencha studio webdriver test

    I generated an ExtJs project using ExtJs 6.5, I used xtype "d3-svg" to generate graph view as below dom tree.
    sencha_svg_circle.PNG
    I write a test try to test the second circle element property

    var circle2 = svg.down('circle:nth-child(2)').get('name').and(function(el){
    circle2.expect('cx').toBe('123');
    expect(this.future.data.cx).toBe('123');
    expect(el.data.cx).toContain('123')
    });

    But the return expect result is object. How should I validate the circle property?

    Expected Object({ animVal: Object({ SVG_LENGTHTYPE_PERCENTAGE: 2, SVG_LENGTHTYPE_PX: 5, SVG_LENGTHTYPE_NUMBER: 1, SVG_LENGTHTYPE_CM: 6, SVG_LENGTHTYPE_PT: 9, SVG_LENGTHTYPE_IN: 8, valueAsString: '213.2', SVG_LENGTHTYPE_MM: 7, SVG_LENGTHTYPE_EXS: 4, convertToSpecifiedUnits: Object({ }), unitType: 1, SVG_LENGTHTYPE_EMS: 3, SVG_LENGTHTYPE_UNKNOWN: 0, valueInSpecifiedUnits: 213.1999969482422, SVG_LENGTHTYPE_PC: 10, value: 213.1999969482422, newValueSpecifiedUnits: Object({ }) }), baseVal: Object({ SVG_LENGTHTYPE_PERCENTAGE: 2, SVG_LENGTHTYPE_PX: 5, SVG_LENGTHTYPE_NUMBER: 1, SVG_LENGTHTYPE_CM: 6, SVG_LENGTHTYPE_PT: 9, SVG_LENGTHTYPE_IN: 8, valueAsString: '213.2', SVG_LENGTHTYPE_MM: 7, SVG_LENGTHTYPE_EXS: 4, convertToSpecifiedUnits: Object({ }), unitType: 1, SVG_LENGTHTYPE_EMS: 3, SVG_LENGTHTYPE_UNKNOWN: 0, valueInSpecifiedUnits: 213.1999969482422, SVG_LENGTHTYPE_PC: 10, value: 213.1999969482422, newValueSpecifiedUnits: Object({ }) }) }) to be 'Male Reproductive System'.
    Expected Object({ animVal: Object({ SVG_LENGTHTYPE_PERCENTAGE: 2, SVG_LENGTHTYPE_PX: 5, SVG_LENGTHTYPE_NUMBER: 1, SVG_LENGTHTYPE_CM: 6, SVG_LENGTHTYPE_PT: 9, SVG_LENGTHTYPE_IN: 8, valueAsString: '0', SVG_LENGTHTYPE_MM: 7, SVG_LENGTHTYPE_EXS: 4, convertToSpecifiedUnits: Object({ }), unitType: 1, SVG_LENGTHTYPE_EMS: 3, SVG_LENGTHTYPE_UNKNOWN: 0, valueInSpecifiedUnits: 0, SVG_LENGTHTYPE_PC: 10, value: 0, newValueSpecifiedUnits: Object({ }) }), baseVal: Object({ SVG_LENGTHTYPE_PERCENTAGE: 2, SVG_LENGTHTYPE_PX: 5, SVG_LENGTHTYPE_NUMBER: 1, SVG_LENGTHTYPE_CM: 6, SVG_LENGTHTYPE_PT: 9, SVG_LENGTHTYPE_IN: 8, valueAsString: '0', SVG_LENGTHTYPE_MM: 7, SVG_LENGTHTYPE_EXS: 4, convertToSpecifiedUnits: Object({ }), unitType: 1, SVG_LENGTHTYPE_EMS: 3, SVG_LENGTHTYPE_UNKNOWN: 0, valueInSpecifiedUnits: 0, SVG_LENGTHTYPE_PC: 10, value: 0, newValueSpecifiedUnits: Object({ }) }) }) to be '123'.

  2. When retrieving the attribute on the SVG element, it's returning an instance of SVGAnimatedLength, containing two objects - "animVal" and "baseVal".

    Each of those objects contains the value you're looking for.

    For example, if I wanted to check the radius of a circle ("r"), I would get "r", and then check "r.baseVal.value":

    Code:
    ST.element('your-locator-here')
        .get('r')
        .and(function() {
            expect(this.future.data.r.baseVal.value).toBeCloseTo(22.42);
        });

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    129
    Answers
    10
    Vote Rating
    20
      0  

    Default

    When retrieving the attribute on the SVG element, it's returning an instance of SVGAnimatedLength, containing two objects - "animVal" and "baseVal".

    Each of those objects contains the value you're looking for.

    For example, if I wanted to check the radius of a circle ("r"), I would get "r", and then check "r.baseVal.value":

    Code:
    ST.element('your-locator-here')
        .get('r')
        .and(function() {
            expect(this.future.data.r.baseVal.value).toBeCloseTo(22.42);
        });
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  4. #3
    Sencha User
    Join Date
    May 2017
    Posts
    5
    Vote Rating
    0
      0  

    Default

    It works. Thanks a lot

  5. #4
    Sencha User
    Join Date
    May 2017
    Posts
    5
    Vote Rating
    0
      0  

    Default

    But here is another issue, I can get circle element by ST.element('>>svg circle:first-child') but I cannot get text element
    by ST.element('>>svg text:first-child') and they are at the same level, do you know why?
    Below is the basic dom structure:
    <svg>
    <g>
    <g>
    <circle cx="10" cy="10" r="5" name="circle1"></circle>
    <circle cx="60" cy="60" r="5" name="circle2"></circle>
    <circle cx="90" cy="90" r="5" name="circle3"></circle>
    <text x="10" y="10">circle1</text>
    <text x="60" y="60">circle2</text>
    <text x="90" y="90">circle3</text>
    </g>
    </g>
    </svg>

  6. #5
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    129
    Answers
    10
    Vote Rating
    20
      0  

    Default

    The "first-child" only references the first child of the parent, which in this instance would be the first circle.

    To reference one of the text nodes, try using "nth-child" instead, e.g.

    Code:
    '>>svg text:nth-child(4)'
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  7. #6
    Sencha User
    Join Date
    May 2017
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Hi Daniel,

    I tried ST.element('>>svg text:nth-child(4)') and the result is "Timeout waiting for target (>>svg text:nth-child(4)) to be available for ST.future.Element"

  8. #7
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    129
    Answers
    10
    Vote Rating
    20
      0  

    Default

    I tried the locator against a simple page containing your sample code snippet above (the one with 3 circles and 3 text nodes), and that locator works for me. If it's failing, it's most likely because the markup that's being rendered differs slightly from the above sample.
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  9. #8
    Sencha User
    Join Date
    May 2017
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Thanks a lot, Dan, I will have another try.

Similar Threads

  1. Connecting Sencha Studio 2 to a test archive?
    By dylan.thomas in forum Q&A
    Replies: 5
    Last Post: 18 Sep 2017, 6:02 AM
  2. Replies: 1
    Last Post: 8 Aug 2017, 4:11 PM
  3. Replies: 2
    Last Post: 28 Feb 2017, 7:52 AM
  4. Replies: 1
    Last Post: 2 Feb 2017, 12:08 PM
  5. Replies: 5
    Last Post: 26 Sep 2016, 11:17 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •