안녕하세요. 엔지엠소프트웨어입니다. 엔지엠 매크로를 이용하면 웹업무 자동화를 남녀노소 누구나 쉽게 만들수 있습니다. 다양한 예제와 웹 API로 처리할 수 없는 다양한 비즈니스 로직을 윈도우 API로 보완할수도 있습니다. 하지만, 웹업무 자동화는 가능하면 웹 API와 웹소켓 또는 크로미움 기능들을 사용하여 구현하는게 좋습니다.

[ 웹소켓 도움말 보기 ]

[ 크로미움 도움말 보기 ]

 

웹 API로 업무 자동화 매크로를 제작하다보면 어쩔 수 없이 CssSelector를 사용해야 하는 경우들이 생깁니다. XPath를 사용하면 좋겠지만, 일부 기능들은 CssSelector로만 엘리먼트를 탐색할 수 있기 때문입니다. 대표적으로 Shadow DOM 내부를 탐색하는 경우들입니다.

[ 웹 API에서 Shadow DOM(쉐도우 루트) 탐색하는 방법 ]

 

좀 더 다양한 환경에 적응하고, 문제를 빠르게 해결하려면 Css Selector 문법을 어느정도 학습 해놓는게 좋습니다. 아래와 같은 입력 엘리먼트를 찾는다고 생각 해봅시다. 엘리먼트 속성으로 아이디와 이름 모두 가지고 있습니다. 이런 경우에는 #(아이디)으로 쉽게 엘리먼트를 선택할 수 있습니다. CssSelector는 적절한 아이디나 이름이 없는 경우 사용할 수 있습니다. Selector는 트리의 엘리먼트와 일치하는 패턴입니다. Xxml 문서에서 노드를 선택할 때 사용할 수 있는 여러 기술중에 하나입니다.

<input type="text" id="fistname" name="first_name" class="myForm">

 

1. ">" 의미와 뜻

CSS에서 ">"는 요소간의 직접적인 자식 관계를 정의할 때 사용합니다. body 태그는 html 태그의 지계 자식 엘리먼트(Element: 요소)입니다.

html> body

 

2. " " 의미와 뜻 (공백)

직계 자식이 아닌 경우 공백으로 정의할 수 있습니다. 엘리먼트가 현재 엘리먼트의 자식 또는 자식의 자식과 같이 여러 단계를 거쳐야 하는 경우 CSS의 직접 자식이 아닌 경우 공백으로 정의합니다. img 태그는 div 태그의 자식이지만 직계 자식은 아닙니다.

div img

 

3. 일반 엘리먼트 속성

input 태그의 이름이 first_name인 엘리먼트를 찾습니다.

input[name='first_name']

 

4. 아이디 속성 (#)

input 태그의 아이디가 firstname인 엘리먼트를 찾습니다.

input#firstname

 

다른 방법으로는 아래와 같이 셀렉터를 설정해도 됩니다. 일반적으로 아이디는 페이지안에서 유니크합니다. name은 중복이 있을 수 있습니다. 또한, 쉐도우 돔(Shadow DOM)을 이용해서 격리된 공간에 별도로 모듈을 설치할 수 잇으므로, 아래와 같이 아이디만 적어줘도 문제가 발생하지는 않습니다.

#firstname

 

5. Class 속성 (.)

점은 태그 내에 있는 클래스 속성을 의미합니다.

input.myForm

 

아래와 같이 태그명 없이 사용하면 모든 엘리먼트를 찾을 수 있습니다.

.myForm

 

6. 다중 속성

아래와 같으 태긔가 있습니다.

<div class="ajax_enabled" style="display:block">

 

다중 속성을 이용해서 태그스틀 선택할 수 있습니다.

div[class='ajax_enabled'] [style='display:block']

 

아래와 같이 사용할 수 있습니다.

img[title='English'][alt='United States']

 

만약, 제외하고 싶은 속성이 있다면 아래와 같이 :not을 사용할수도 있습니다. 4개의 div에 모두 "calendar-day-"를 포함하지만, 처음 2개의 div에는 원하지 않는 "unavailable"이 있습니다.

<div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable">
<div class="day today calendar-day-2017-02-14 calendar-dow-2 unavailable">
<div class="day calendar-day-2017-02-15 calendar-dow-3">
<div class="day calendar-day-2017-02-16 calendar-dow-4">

 

아래와 같이 마지막 2개의 div만 가져올 수 있습니다.

div[class*=calendar-day-]:not([class*='unavailable'])

 

7. 자식 엘리먼트

div 태그의 아이디는 logo입니다. div 태그의 자식 엘리먼트로 img 태그가 있습니다.

<div id="logo">
    <img src="./logo.png" />
</div>

 

CssSelector는 아래와 같이 설정할 수 있습니다.

div#logo img

 

8. 다중 자식 엘리먼트

리스트 또는 목록형 엘리먼트와 같이 동일한 상위 엘리먼트 내에 여러개의 하위 엘리먼트가 있는 경우가 있습니다. 꼭 ul > li가 아니더라도 div > div도 동일합니다.

<ul id="fruit">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

 

fluit 목록에서 Orange 항목을 찾으려면 아래와 같이 hth-of-type에 인덱스를 사용할 수 있습니다.

ul#fruit li:nth-of-type(1)

 

Banana를 찾을때는 아래와 같이 사용할수도 있습니다. 목록에서 아이디가 없거나 랜덤하게 자동으로 부여되는 경우 편리하게 사용할 수 있습니다.

ul#fruit li:last-child

 

공통으로 존재하는 "random" 문자열이 있는 예제입니다.

<div id="123_randomId">
<div id="randomId_456">
<div id="123_pattern_randomId">

 

위에서 첫번째 div 엘리먼트를 선택하려면 ^=를 사용합니다. ^=의미는 주어진 키워드로 시작한다는 뜻입니다. 첫번째와 세번째 엘리먼트가 선택됩니다.

div[id^='123']

 

두번째 엘리먼트를 선택하려면 $=을 사용합니다. 주어진 키워드로 끝나는 엘리먼트를 가져옵니다.

div[id$='456']

 

9. "^", "$", "*" 문자열 속성

"*"는 포함하는 문자를 의미합니다.

div[id*='문자열패턴']

img[id*='n_U']

 

포함하는 문자는 엔지엠 매크로에서 문자열 체크 액션과 동일하게 contains와 같습니다. 따라서 아래와 같이 사용해도 됩니다.

div:contains('문자열패턴')

 

"^"는 시작되는 문자열을 의미합니다. 엔지엠 매크로에서는 StartWith와 같습니다.

img[title^='En']

 

"$"는 끝나는 문자열을 의미합니다. 엔지엠 매크로에서는 EndWith와 같습니다.

img[title$='sh']

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0