如何确认鼠标悬停在元素上是否显示弹出窗口以及如何使用量角器获取显示的弹出窗口的内部文本

Question

我的量角器代码

var meover = element(by.xpath('/html/body/div[2]/div[1]/div[2]/span[1]/code'));

meover.getText().then(console.log);

browser.actions().mouseMove(meover).perform();

browser.sleep(2000);

如何获得popover文本？看图像以便更好地理解

图片

Answer 1

为什么你想用量角器做到这一点？你可以创建一个Directive [popover]或一个组件来做到这一点 例如：

.ts文件：

import {Component, Input} from "@angular/core";

@Component({
    selector: "popover",
    templateUrl: "popover.component.html"
})
export class PopoverComponent {
    @Input() title: string;
    @Input() content: string;
}

.html文件：

 <ng-content></ng-content>
<div class="popover">
    <div class='header'>{{ title }}</div>
    <div class='content'>{{ content }}</div>
</div>

css的例子：

popover {
    position: relative;
    display: inline-block;
}

.popover {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(50%) translateY(100%);
    width: 300px;
}

popover:hover > .popover {
    display: block;
}

我没有对它进行测试，但它应该看起来像我的例子。

要使用它，您将在HTML文件中写下：

Hint : place the mouse over <popover [title]="my title" [content]="text displayed on hover">me</popover> !

Answer 2

var meover = element(by.xpath('/html/body/div[2]/div[1]/div[2]/span[1]/code'));
var toolbox = 'selector here';
browser.actions().mouseMove(meover).perform().then(() => {
    toolbox.getText().then((text) => {
        console.log(text);
    });
});

Answer 3

找到解决方案：

.........
.........
browser.actions().mouseMove(element(by.css('code.nocode.code-annotation'))).perform();
expect(element(by.css('.popover')).isDisplayed()).toBe(true);
popOver = element(by.css('.popover'));
popOver.getAttribute('title').then(console.log);
popOver.getAttribute('content').then(console.log);