프로젝터 + 크롬 드라이버:요소를 현재 클릭할 수 없습니다.

프로젝터 + 크롬 드라이버:요소를 현재 클릭할 수 없습니다.

안녕하세요, 기본적인 절단기 테스트를 받는 데 문제가 좀 있습니다.

내 설정:

• 나는 requirejs를 사용하기 때문에 angular를 사용하여 angular를 초기화합니다.부트스트랩은 ng-app 속성이 아닙니다.프로젝터 문서에 따르면 이는 개봉 즉시 지원되지 않지만 클릭을 수반하지 않는 테스트에서는 정상적으로 작동하는 것으로 보입니다.

• 투영기 conf.json:

  "use strict";
  exports.config = {
      specs: '../E2ETests/**/*.js',
      chromeOnly: true,
      getPageTimeout: 30000,
      allScriptsTimeout: 30000
  }
  

• 지시로 포장한 서드파티제 jquery 플러그를 사용하고 있는데, 이것이 문제의 일부일 수 있습니다.

테스트:

"use strict";
describe('When clicking should add stuff', function () {
    var ptor;
    beforeEach(function () {
        browser.get('https://localhost/myApp');
        ptor = protractor.getInstance();
    });
    it('add stuff', function () {
        // If I comment this, the test pass. 
        element(by.id('add-stuff-button')).click();
        // This does not matter fails on the line above..
        expect(browser.getTitle()).toBeDefined();
    });
});

오류:

UnknownError: unknown error: Element is not clickable at point (720, 881). Other element would         receive the click: <div class="col-md-5 col-md-offset-5">...</div>
(Session info: chrome=37.0.2062.124)
(Driver info: chromedriver=2.10.267521,platform=Windows NT 6.1 SP1 x86_64)

생각들

chromedriver는 버튼을 찾아요. 왜냐하면 ID를 변경하면 요소를 찾을 수 없다는 불만이 제기되기 때문입니다.그래서 버튼이 원래 위치에서 움직이는 게 문제인 것 같아요.Element(***) 함수는 angular가 완료될 때까지 기다려야 하므로 angular api의 fatching data 등을 사용하지 않을 수 있으므로 간섭할 가능성이 있는 것은 서드파티 플러그인이 아닐까 생각합니다.그래서 각도에서는 끝났다고 생각하지만, 서드파티 플러그가 채워지고 물건이 옮겨집니다.

어떻게 해야 할지 생각나는 거 없어?서드파티 플러그에 문제가 있는 경우, 서드파티제의 일이 진행되고 있다고 각을 세우고 나서, 그 일이 끝나면 나중에 알려드려도 될까요?

ThxBrTwd

구성 파일에서 창 크기를 설정해야 합니다.

onPrepare: function() {
  browser.manage().window().setSize(1600, 1000);
}

다음 작업은 문제없이 수행되었습니다.

browser.actions().mouseMove(element).click();

편집: 위의 chaining perform() 메서드도 사용할 수 없는 경우(편집 제안으로 받은 것입니다.테스트는 하지 않았지만 누군가가 확인하고 코멘트를 할 수 있습니다)

browser.actions().mouseMove(element).click().perform();

이 문제는 크롬 창이 너무 작을 때 발생합니다.각각 내부에 추가해 주세요.

browser.driver.manage().window().setSize(1280, 1024);

또는 Actions 클래스를 사용합니다.

browser.actions().mouseMove(elem).click().perform();

같은 문제가 발생했지만 창 크기와는 관련이 없지만 ngAnimation이 종료될 때까지 기다려야 했습니다.

요소를 클릭할 수 있을 때까지 기다려야 했습니다.

    const msg = 'Waiting for animation timeout after 1s';
    const EC  = new protractor.ProtractorExpectedConditions();
    await browser.wait(EC.elementToBeClickable(model.elements.button.checkCompliance), 1000, `${msg} panel`);
    await model.elements.button.checkCompliance.click();

@note - 비동기/대기 노드8 기능을 사용하고 있기 때문에, 이것을 통상의 약속으로 변환할 수 있습니다.또, 사용ProtractorExpectedConditions대신ExpectedConditions 매뉴얼 참조

당신의 경우는 해당되지 않을지도 모릅니다만, 같은 문제가 발생했습니다만, Milena의 답변을 근거로, 버튼을 가리는 다른 요소(저의 경우는 화면 우측 상단의 드롭다운 메뉴)를 찾고 있습니다.

브라우저 동기화에서 보낸 Connected to Browser Sync 알림 메시지이며 Gulp에서 시작된 것으로 보입니다.메시지는 잠시 후 사라졌지만 onClick() 호출 후 사라졌습니다.

알림을 제거하려면 gulpfile에 브라우저 동기화 초기화 시 알림: false param:을 추가했습니다.

browserSync.init(files, {
    server: {
        baseDir: "dist",
        index: "index.html"
    },
    notify: false
});

브라우저의 타임슬립을 사용하여 이 문제를 해결합니다.

browser.driver.sleep(3000)

클릭 버튼을 누르기 전에

( " " " " )을 통해 정의할 수 .protractor.conf.js ★★★★★★★★★★★★★★★★★」config.js를 사용하여 을 일관되게 합니다를 사용하여 테스트 동작의 일관성을 확보합니다.

예를 들어 Chrome 브라우저의 경우:

exports.config = {
  specs: [
    // ...
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: [
        '--window-size=1600,900',
        '--headless'
      ]
    }
  }
  // ...
}

설명

• window-size크롬 1600 x 900 1600 1600 1600 。
• headless헤드리스 크롬이 기동하여 화면 해상도가 이보다 낮더라도 지정된 창 크기(1600x900)로 테스트를 실행할 수 있습니다.

고해상도 화면을 항상 사용하는 개발자용(헤드리스 모드 없음)과 빌드 서버용(헤드리스 모드)의 2가지 구성을 선택할 수 있습니다.화면 해상도는 애플리케이션/테스트 용도보다 낮을 수 있습니다.protractor 구성 파일은 javascript이며 코드 중복을 방지하기 위해 확장할 수 있습니다.

같은 에러가 발생하여 화면 크기만 조정해도 수정이 되지 않았습니다.

추가 검사 결과 다른 요소가 버튼을 가리고 있는 것처럼 보였고, 셀레늄 테스트는 버튼을 클릭하지 않았기 때문에 실패했습니다.그래서 화면 크기를 조절하면 수정이 되는 걸까요?

어떤 고정 기뢰가 다른 요소를 제거(나중에 위치 조정)했는가.

여러 디스플레이에서 실행할 필요가 있는 경우 창 크기를 지정하는 것보다 이 방법이 더 효과적입니다.

browser.manage().window().maximize();

그 외의 방법으로, 다음의 조작을 실시할 수 있습니다.

this.setScrollPage = function (element) {

    function execScroll() {
        return browser.executeScript('arguments[0].scrollIntoView()',
            element.getWebElement())
    }

    browser.wait(execScroll, 5000);
    element.click();
};

또한 사용 중인 디버깅툴을 꺼볼 수도 있습니다.Larabel과 debugbar를 사용하고 있었는데 APP_DEBUG를 false로 설정해야 했습니다.

갈 말가릿의 대답에 따르면

구성 파일에서 창 크기를 설정해야 합니다.

onPrepare: function() {
  browser.manage().window().setSize(1600, 800);
}

그래도 작동하지 않으면 요소의 위치로 스크롤해야 합니다.

browser.executeScript('window.scrollTo(720, 881);');
element(by.id('add-stuff-button')).click();

이 문제는 상단 네비게이션바 또는 하단 네비게이션바/쿠키 경고바가 요소를 덮고 있기 때문에 발생할 수 있습니다.angular 2의 경우, 클릭할 때 요소가 페이지 위에 있을 때까지 스크롤합니다.즉, 스크롤을 내려 무언가를 클릭할 때 아래쪽 네비게이션이 있으면 클릭이 방해됩니다.마찬가지로 위쪽으로 스크롤할 때 상단 네비게이션으로 커버할 수 있습니다.

지금은 스크롤 업을 하기 위해 다음을 사용하고 있습니다.

browser.refresh();
browser.driver.sleep(3000);

테스트를 시작하기 전에 하단 바를 클릭하여 닫는 방법으로 제거했는지 확인했습니다.

즉, 요소가 보이는 영역 내에 있지 않습니다.이 문제를 해결하는 방법은 여러 가지가 있습니다.

1. 표시 여부에 관계없이 요소를 강제로 클릭합니다.

await browser.executeScript('arguments[0].click();', $element.getWebElement());

2. 요소까지 스크롤한 다음

await browser.executeScript(`arguments[0].scrollIntoView({block: "center"});`, $element.getWebElement());
await $element.click()

3. 테스트 전에 브라우저 창의 작업 영역 최대화

beforeAll(async () => await browser.driver
  .manage()
  .window()
  .setSize(1920, 1080)
);

언급URL : https://stackoverflow.com/questions/26211751/protractor-chrome-driver-element-is-not-clickable-at-point